Ajax PDF

Herbert Moroni
CRIAO DE SITES EM AJAX
Desvendando o AJAX
Tudo sobre a linguagem que revolucionou a Internet
Criao de sites em
Se voc nunca ouviu falar de AJAX, pode se considerar uma pessoa altamente desatualizada em termos de tecnologia para desenvolvimento de websites. Nos ltimos tempos, o AJAX ganhou fora no mercado e seu conhecimento passou a ser pr-requisito para quem deseja criar sites para a Web 2.0, que se atualizam sem a necessidade de carregar novamente a pgina. Com ele, possvel fazer uma busca por informaes no servidor Web usando a prpria pgina carregada. Seus recursos so tantos que hoje os mais modernos sites j usam essa tecnologia, incluindo Google e Amazon, que foram os primeiros megaportais a utilizar AJAX em suas pginas. Com isso, passou a ser fundamental para programadores Web conhecer o AJAX a fundo para conseguir uma posio de destaque profissional. Neste livro, voc conhecer os principais comandos JavaScript usados no AJAX, saber como trabalhar com os controles e classes fornecidas, alm de aprender a usar o Framework ASP.NET AJAX, e assim, ser oficialmente apresentado Web 2.0.
> Principais comandos > Framework ASP.NET AJAX > Controles e classes fornecidas > Exemplos prticos > Uso de variveis, arrays e operadores > Estruturas, funes e eventos E muito mais...
Herbert Moroni
Criao de sites em
2007 by Digerati Books Todos os direitos reservados e protegidos pela Lei 9.610 de 19/02/1998. Nenhuma parte deste livro, sem autorizao prvia por escrito da editora, poder ser reproduzida ou transmitida sejam quais forem os meios empregados: eletrnicos, mecnicos, fotogrcos, gravao ou quaisquer outros.
Diretor Editorial Luis Matos Assistncia Editorial Monalisa Neves Erika S Edio de Arte e Projeto Grco Daniele Ftima Preparao dos originais Ricardo Dino de Freitas
Reviso Guilherme Laurito Summa Diagramao Fabiana Pedrozo Capa Daniel Brito
Dados Internacionais de Catalogao na Publicao (CIP) (Cmara Brasileira do Livro, SP, Brasil)
M868c Moroni, Herbert. Criao de sites em AJAX / Herbert Moroni. So Paulo : Digerati Books, 2007. 128 p. ISBN 978-85-60480-33-1 1. Webdesign. 2. AJAX (Programa de Computadores). I. Ttulo. CDD 005.3
Universo dos Livros Editora Ltda. Rua Tito, 1.609 CEP 05051-001 So Paulo/SP Telefone: (11) 3648-9090 Fax: (11) 3648-9083 www.universodoslivros.com.br e-mail: editor@universodoslivros.com.br Conselho Administrativo: Alessandro Gerardi, Alessio Fon Melozo, Luis Afonso G. Neira, Luis Matos e William Nakamura.
Sumrio
Pr-requisitos para o curso .........................................4 Captulo 1 Entendendo o AJAX .....................................................5
O que o AJAX?.................................................................................. 6 Consideraes sobre o uso do AJAX ............................................. 18
Captulo 2 ASP.NET AJAX ............................................................. 21

Instalando o AJAX ASP.NET ............................................................. 22 Conhecendo o AJAX ASP.NET ......................................................... 26
Captulo 3 O controle UpdatePanel............................................. 51 Captulo 4 O controle Timer ........................................................69 Captulo 5 A classe PageRequestManager ..................................79 Captulo 6 Usando ASP.NET AJAX em aplicaes j existentes ....93 Apndice
JavaScript ......................................................................................... 100 Arquivo externo com extenso .js ................................................ 100 No head entre as tags <head> e </head> ................................. 101 No body entre as tags <body> e </body> ................................ 101 Estruturas de controle .................................................................... 106
Pr-requisitos para o curso

Para que voc possa acompanhar as lies deste curso necessrio que j tenha preenchido os seguintes pr-requisitos: conhecimento bsico do Windows 98, 2000 ou XP, tais como: criao de pastas e subpastas; utilizao do mouse e do teclado; operaes bsicas com arquivos e pastas, usando o Windows Explorer; conhecer conceitos tais como cones, rea de trabalho, janelas do Windows, uso de menus e outras conguraes bsicas do Windows. conhecimento de desenvolvimento em ASP.NET: criao de pginas e acesso a banco de dados; conhecimento sobre HTML; desejvel conhecimento bsico sobre Javascript.
Captulo 1
Entendendo o AJAX
Voc vai vericar que, durante todo esse livro, vamos trabalhar com vrios exemplos passo a passo. Isso facilita a compreenso memorizao j mostra como voc pode na prtica aplicar os conhecimentos que est adquirindo. Fique vontade para me acompanhar nas prticas em seu prprio computador ou apenas estudar os passos no decorrer dos exemplos. Para acompanhar os exemplos voc vai precisar ter uma verso do Visual Studio instalada em sua mquina, desde que ela seja na verso 2005 voc pode us-la tranqilamente, no entanto, estarei usando nos exemplos o Visual Studio Web Developers Express Edition 2005, por ser uma verso gratuita e que pode ser baixada facilmente do site da Microsoft. Usarei tambm a verso Express do SQL Server 2005 para os exemplos com banco de dados. As ferramentas Express da Microsoft so destinadas a estudantes, entusiastas etc. que querem conhecer e aprender mais sobre suas funcionalidades. So ferramentas com algumas limitaes, quando utilizadas para desenvolvimento corporativo, porm, com recursos incrveis e produtivos. possvel desenvolver projetos de todos os portes com as ferramentas Express. Saiba mais sobre elas visitando a url: http://msdn.microsoft.com/vstudio/express/. Quanto linguagem utilizada nos exemplos, vou alternar entre VB.NET e C#, sempre mostrando como seria nas duas linguagens. Agora que j falamos sobre o nosso ambiente de produo, vamos fazer nosso primeiro exemplo para compreender o que o AJAX e como utiliz-lo em nossas aplicaes ASP.NET.
O que o AJAX?
AJAX a abreviao de Asynchronous JavaScript And XML. No uma tecnologia, e sim uma metodologia, que utiliza vrios recursos e tecnologias como Javascript, DOM e XML. O objetivo do AJAX evitar que a cada solicitao do servidor pgina precise ser completamente recarregada. Para isso, usamos o objeto XMLHttpRequest por meio do Javascript para intermediar todas as solicitaes ao servidor. Vamos ver como isso funciona.
Criao de sites em AJAX

6
1. Entre no Visual Studio e crie um novo Web Site chamado IntroducaoAjax. Neste primeiro exemplo, eu vou usar a linguagem VB.NET.
Figura 1.1.
Neste nosso primeiro exemplo, vamos criar uma aplicao cliente com Javascript e o objeto XMLHttpRequest que solicita ao servidor uma simples adio de dois valores inteiros. Para isso, teremos duas pginas na nossa aplicao: uma que atuar como o cliente, e outra como servidor, que retornar o valor calculado. 2. Crie um novo formulrio para sua aplicao com nome Default2.aspx. Para isso, clique com o boto direito sobre o nome do projeto na janela Solution Explorer e depois clique em Add New Item ( Figura 1.2 ).
Figura 1.2.
Entendendo o AJAX
7
3. Na janela aberta, selecione Web Form, marque a opo Place code in separate le (isso faz com que seja criado um arquivo separado para o cdigo da pgina) e clique em Add.
Figura 1.3.
4. Na pgina Default.aspx, adicione trs controles HTML do tipo Input (Text) , como na imagem a seguir. Note que para adicionar controles HTML usamos a guia HTML na Toolbox.
Figura 1.4.

8
5. Organize os controles como a Figura 1.5:
Figura 1.5.
6. Mude a propriedade Value dos dois primeiros controles (Text1 e Text2) para 0, como mostra a Figura 1.6:
Figura 1.6.
Entendendo o AJAX
9
Vai car assim:
Figura 1.7.
7. Ainda na pgina Default.aspx, clique no boto Source para ir ao cdigo HTML da pgina. 8. Insira o seguinte cdigo dentro da tag <Head> da pgina:
<script language=javascript> var ajax; function openAjax() { if (window.ActiveXObject) { ajax = new ActiveXObject(Microsoft.XMLHTTP); } else if (window.XMLHttpRequest) { ajax = new XMLHttpRequest(); } } function atualizar() { if (ajax.readyState==4) { document.getElementById(Text3).value = ajax.responseText; } } function total() { url=Default2.aspx?A= + document.getElementById(Text1). value +

10
&B= + document.getElementById(Text2).value; ajax.open(GET,url,true); ajax.onreadystatechange = atualizar; ajax.send(); } </script>
No se preocupe se no compreender o cdigo Javascript agora, logo adiante eu vou explicar em detalhes cada uma das funes do cdigo anterior. 9. Adicione o atributo onload=openAjax(); na tag <Body>. Vai car assim:
<body onload=openAjax();>
Isso faz com que a funo Javascript openAjax()seja executada assim que a pgina for carregada. 10. Ainda no cdigo HTML, adicione o atributo onkeyup=total(); nas tags das duas caixas de texto. Elas vo car assim:
<input id=Text1 type=text onkeyup=total(); value=0 /> <input id=Text2 type=text onkeyup=total(); value=0 />
Isso permite que a funo Javascript total()seja executada sempre que o evento onkeyup ocorra em qualquer uma das caixas de texto. Segue o contedo em HTML inteiro do arquivo Default.aspx, caso voc tenha alguma dvida:
<%@ Page Language=VB AutoEventWireup=false CodeFile=Default.aspx.vb Inherits= _ Default %> <!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 > <head runat=server> <title>Untitled Page</title> <script language=javascript>
Entendendo o AJAX
11
var ajax; function openAjax() { if (window.ActiveXObject) { ajax = new ActiveXObject(Microsoft.XMLHTTP); } else if (window.XMLHttpRequest) { ajax = new XMLHttpRequest(); } } function atualizar() { if (ajax.readyState==4) { document.getElementById(Text3).value = ajax. responseText; } } function total() { url=Default2.aspx?A= + document. getElementById(Text1).value + &B= + document.getElementById(Text2).value; ajax.open(GET,url,true); ajax.onreadystatechange = atualizar; ajax.send(); } </script> </head> <body onload=openAjax();> <form id=form1> <div> <input id=Text1 type=text onkeyup=total(); value=0 /> <br /> <br /> <input id=Text2 type=text onkeyup=total(); value=0 /> <br /> <br /> <input id=Text3 type=text /> </div> </form> </body> </html>

12
11. Agora vamos para o arquivo Default2.aspx. 12. D um clique duplo sobre a pgina em branco para que o evento Page_Load seja criado e digite o seguinte cdigo:
Dim a As Integer = 0 Dim b As Integer = 0 If Request.QueryString(A) <> Nothing Then a = Convert.ToInt16(Request.QueryString(A). ToString()) End If If Request.QueryString(B) <> Nothing Then b = Convert.ToInt16(Request.QueryString(B). ToString()) End If Response.Write(a + b)
Vai car assim:
Figura 1.8.
Esse cdigo bem simples. Primeiro declaramos duas variveis do tipo Integer e atribumos o valor 0 a elas.
Entendendo o AJAX
13
Ento, vericamos se existe um parmetro A com valor. Se sim, atribumos esse valor varivel. Fazemos o mesmo com o parmetro B. A ltima linha escreve a soma dos valores das duas variveis. Esse texto ser recuperado pelo nosso programa AJAX e atribudo caixa de texto necessria. Se voc estiver usando a linguagem C#, segue o cdigo:
int a = 0; int b = 0; if (Request.QueryString[A] != null){ a = Convert.ToInt16(Request.QueryString[A].ToString()); } if (Request.QueryString[B] != null){ b = Convert.ToInt16(Request.QueryString[B]. ToString()); } Response.Write(a + b);
13. A ltima modicao. V para o cdigo HTML da pgina Default2.aspx e apague tudo, deixando apenas a primeira linha de cdigo que contm a diretiva Page. Como a imagem a seguir:
Figura 1.9.

14
14. Volte para a pgina Default.aspx e execute sua aplicao (para isso voc pode clicar em F5). A seguinte tela poder aparecer:
Figura 1.10.
Apenas clique em OK para habilitar o Debug. A seguinte janela se abre:
Figura 1.11.
Digite alguns nmeros nas duas primeiras caixas de texto. Observe que, conforme voc digita, o resultado j vai sendo calculado e exibido na terceira caixa de texto sem recarregar nenhuma vez a pgina, isso AJAX. Usamos Javascript, o objeto XMLHttpRequest e o DOM para fazer solicitaes ao servidor rodando ASP.NET. Vamos agora analisar as trs funes Javascript que usamos:
A primeira funo
function openAjax() { if (window.ActiveXObject) { ajax = new ActiveXObject(Microsoft.XMLHTTP); } else if (window.XMLHttpRequest) { ajax = new XMLHttpRequest(); } }
Entendendo o AJAX
15
O objeto XMLHttpRequest foi primeiramente implementado pela Microsoft no Internet Explorer como um objeto ActiveX chamado XMLHTTP. Em seguida, outros navegadores (Mozilla, Safari, entre outros) seguiram o mesmo caminho implementando o XMLHttpRequest em uma classe que suporta as propriedades e os mtodos do objeto ActiveX da Microsoft. S que esses navegadores implementaram o objeto XMLHttpRequest de forma nativa, enquanto a Microsoft o implementou como um objeto ActiveX. Isso signica que precisaremos vericar qual o objeto que o navegador trabalha, XMLHTTP ou XMLHttpRequest. isso que fazemos nesta primeira funo. Se estivermos trabalhando com o Internet Explorer, vamos adicionar o ActiveX XMLHTTP varivel ajax que declaramos antes desta funo no Javascript. Se for outro navegador, vamos atribuir o objeto XMLHttpRequest. Eles trabalham de forma idntica.
A segunda funo
function atualizar() { if (ajax.readyState==4) { document.getElementById(Text3).value = ajax.responseText; } }
Aqui vericamos se a requisio est completa e ento atribumos o valor retornado por ela terceira caixa de texto. Fazemos isso por meio da propriedade readyState do objeto XMLHttpRequest. Esta propriedade possui cinco estgios, que vo de 0 a 4. O nmero 4 indica que a requisio est completa. A seguir, uma descrio completa dos cinco estgios: 0 - no inicializado; 1 - carregamento; 2 - carregado; 3 - interativo; 4 - completo.
Voc pode utilizar o estgio 1 para exibir uma mensagem de carregando, por exemplo, at que o estgio 4 esteja completo. Uma outra propriedade que usamos nesta funo a responseText. Por meio dela, atribumos o valor que est sendo retornado

16
caixa de texto. Essa propriedade sempre retorna uma string com os dados do servidor Web. Mas, ao invs dela, voc pode usar a propriedade responseXML, que retorna um documento XML. Este documento pode ser manipulado por voc utilizando DOM e Javascript. Temos tambm a propriedade onreadystatechange que ser comentada quando estudarmos a prxima funo. O objeto XMLHttpRequest tem mais duas propriedades importantes que podem ser bem teis em suas pginas. So elas: status e statusText. status retorna um nmero que representa o status HTTP. Por exemplo, pode retornar o nmero 404 indicando que a pgina solicitada no pde ser encontrada; statusText retorna um texto associado ao cdigo do status HTTP. Por exemplo, pode retornar Pgina no encontrada. No vou me aprofundar em exemplos sobre estas propriedades, mas voc pode utiliz-las como utilizamos a propriedade readState para enriquecer ainda mais suas aplicaes AJAX.
A terceira funo
function total() { url=Default2.aspx?A= + document.getElementById(Text1). value + &B= + document.getElementById(Text2).value; ajax.open(GET,url,true); ajax.onreadystatechange = atualizar; ajax.send(); }
Esta funo pega os valores das duas primeiras caixas de texto e envia para a pgina Default2.aspx como parmetro. A pgina Default2.aspx usar esses valores para efetuar a soma e retornar o resultado.
url=Default2.aspx?A= + document.getElementById(Text1). value + &B= + document.getElementById(Text2).value;
Se os valores digitados nas duas primeiras caixas de texto forem 12 e 11 respectivamente, o cdigo anterior vai atribuir a seguinte string varivel url:
Entendendo o AJAX
17
Default2.aspx?A=12&B=11
Nesta funo, usamos os mtodos open e send. A seguir, a descrio detalhada dos mtodos disponveis no objeto XMLHttpRequest: open (mtodo, url, sncrono, usurio, senha): inicia uma nova requisio, em que: mtodo requisio HTTP, pode ser GET ou POST; url endereo da URL que ser requisitada no servidor web; sncrono se o mtodo trabalhar de forma sncrona ou assncrona; o valor padro true, que quer dizer assncrona; usurio e senha se o servidor Web necessitar de uma autenticao. send (dados): envia a requisio. Enviando opcionalmente os dados; abort(): aborta uma requisio em atividade; setRequestHeader(nome, valor): informa um cabealho (header) para a requisio; getResponseHeader(nome): retorna o valor do cabealho (header) informado; getAllResponseHeaders(): retorna uma string contendo todos os cabealhos (header). Para nalizar, nesta funo voc conheceu a propriedade onreadystatechange do objeto XMLHttpRequest. Ela indica qual funo ser executada sempre que o estado do objeto XMLHttpRequest for alterado. No nosso caso, a funo atualizar().
Consideraes sobre o uso do AJAX

Como voc percebeu, embora possa criar aplicaes com interfaces bem mais ricas, em AJAX isso no algo simples, principalmente pelo fato dele ser uma tecnologia executada no cliente. E no cliente podemos ter diferentes tipos de navegadores e cada navegador pode ter ainda instalado ou no certos tipos de extenses que podem inuenciar na execuo do cdigo. Pode acontecer ainda do Javascript simplesmente no estar habilitado no navegador do cliente.

18
Ento, voc vai precisar escrever cdigo Javascript para cada uma das possibilidades e test-las. Ainda assim, para os navegadores sem suporte a javascript, ser necessrio o que chamamos de javascript no-obstrutivo, ou seja, sua pgina deve rodar sem os recursos do AJAX. Isso porque na Internet cada visitante um potencial cliente e voc no pode eliminar potenciais clientes porque eles no tm os recursos que voc precisa para que eles naveguem no seu site. Para programar em Javascript, tambm no contamos com as ferramentas de Debug (tratamento de erros) e o IntelliSense do Visual Studio que melhoram muito a produtividade de um sistema ou Web site para a Internet. O que eu quero deixar bem claro aqui que tudo tem seu preo. Com o ganho na interface, temos uma perda de produtividade e isso no bom. Principalmente para os programadores ASP.NET que tm sua disposio todos os recursos do Visual Studio. E como voc sabe, perda de produtividade representa maior tempo de desenvolvimento, com isso temos um aumento no custo do projeto. exatamente isso que ningum quer, principalmente as empresas contratantes que cada vez mais pressionam os projetos para que os custos e prazos sejam reduzidos. Visando dar maior produtividade no desenvolvimento de aplicaes ASP.NET foram criados vrios Frameworks, ou seja, bibliotecas de cdigo javascript que podemos usar no desenvolvimento com o AJAX. O Google tem um framework desses, mas eles tambm no ajudam muito para quem desenvolve em ASP.NET usando o Visual Studio .NET pela difcil integrao com o mesmo. Atravs deles, perdemos o poder dos Web Server Controls, como voc viu no exemplo que zemos neste captulo. Tentando ajudar na produtividade dos programadores .NET, a Microsoft lanou seu prprio Framework integrado ao Visual Studio. Primeiro conhecido como ATLAS e agora chamado de ASP.NET AJAX, ele o tema principal deste livro. Por meio dele, usaremos os poderosos recursos do AJAX sem uma perda considervel de produtividade. A Microsoft tambm tem outras iniciativas para melhorar o desenvolvimento com AJAX, principalmente com a verso futura do Visual Studio que deve ajudar na depurao de erros do Javascript.
Entendendo o AJAX
19
Captulo 2
ASP.NET AJAX
O objetivo deste captulo mostrar a voc o poder do Framework ASP.NET AJAX em suas aplicaes Web, como ele pode melhorar a produtividade e deixar suas aplicaes mais interativas.
Instalando o AJAX ASP.NET

Vamos agora instalar os recursos que usaremos do AJAX ASP. NET. Se voc tiver instalado em sua mquina verses anteriores das que estamos instalando, como a antiga biblioteca ATLAS da Microsoft, o ideal que as desinstale antes de prosseguir. Vamos precisar fazer o download de um arquivo na Internet para a instalao. Se voc estiver conectado Internet, j pode faz-lo. Em seguida, siga a instalao passo a passo durante os prximos exemplos. Caso contrrio, faa o download do arquivo e depois instale em sua mquina como explicado a seguir. 1. Visite o site a seguir ( Figura 2.1): www.asp.net.
Figura 2.1.
2. No menu, clique em AJAX, ou acesse diretamente a url: http://ajax.asp.net 3. Na parte superior, clique em Download.

22
Figura 2.2.
4. Na pgina que se abre, clique no boto Download ASP.NET AJAX v1.0.
Figura 2.3.
Voc vai ser direcionado a uma pgina de download da Microsoft, como mostra a Figura 2.4:
ASP.NET AJAX
23
Figura 2.4.
5. Clique no boto Download. Voc pode salvar este arquivo no seu disco rgido clicando em Salvar, ou execut-lo imediatamente, clicando em Executar.
Figura 2.5.
6. Clique em Executar para iniciar o download e execut-lo imediatamente. Ser feito o download e a instalao ser iniciada, como mostra a Figura 2.6:
Figura 2.6.

24
7. Clique em Next. 8. Marque a opo I accept the terms in the License Agreement e clique em Next.
Figura 2.7.
9. Clique em Install para continuar ( Figura 2.8 ).
Figura 2.8.
10. Aps concluir a instalao, desmarque a opo Display Microsoft ASP.NET 2.0 AJAX Extensions 1.0 Release Notes e clique em Finish ( Figura 2.9 ).
Figura 2.9.
A instalao foi concluda com sucesso.
ASP.NET AJAX
25
Conhecendo o AJAX ASP.NET

1. Entre no Visual Studio 2005 e clique em Create Web Site.
Figura 2.10.
Perceba que, ao criar o novo projeto, foi adicionado um novo Template chamado ASP.NET AJAX-Enabled Web Site. Quando voc seleciona este Template, o Visual Studio adiciona automaticamente no arquivo Web.Cong as instrues usadas pelos componentes ASP. NET AJAX. Nos prximos tpicos, voc vai conhecer essas alteraes e aprender a usar o ASP.NET AJAX em aplicaes Web j existentes. 2. Selecione o Template ASP.NET AJAX-Enabled Web Site e crie um novo WebSite chamado IntroASPNETAJAX, como mostra a Figura 2.11:
Figura 2.11.

26
Durante a instalao, o Assembly AJAXExtensionToolbox.DLL foi referenciado na ToolBox do Visual Studio. O resultado disso a nova guia que voc tem disponvel agora na sua Toolbox, como mostra a Figura 2.12 :
Figura 2.12.
No modo Design, na pgina Default.aspx, voc nota mais uma diferena: o controle ScriptManager, como mostra a Figura 2.13:
Figura 2.13.
O controle ScriptManager responsvel por tornar os scripts disponveis para o navegador do cliente. Por isso, ele necessrio em todas as pginas que voc for utilizar ASP.NET AJAX. Ele a parte central do Framework ASP.NET AJAX e controla todos os recursos AJAX na pgina. 3. Vamos agora adicionar um banco de dados ao nosso projeto. Para isso, na janela Solution Explorer, clique com o boto direito sobre o nome do projeto e selecione Add New Item ( Figura 2.14 ):
ASP.NET AJAX
27
Figura 2.14.
4. Na janela Add New Item, em Templates, selecione SQL Database. Mude o nome do arquivo para Projetos.mdf e, em seguida, clique em Add, como mostra a Figura 2.15:
Figura 2.15.
5. Voc questionado se deseja adicionar o arquivo de banco de dados em uma pasta especialmente reservada a ele chamada App_ Data ( Figura 2.16 ). Isto uma boa prtica, clique em Sim.
Figura 2.16.

28
Repare que a conexo ao banco de dados que acabamos de criar exibida na janela Database Explorer, como mostra a Figura 2.17:
Figura 2.17.
6. Vamos adicionar uma tabela no nosso banco de dados. Para isso, na janela Database Explorer, clique com o boto direito sobre Tables e selecione Add New Table.
Figura 2.18.
7. Preencha as colunas Column Name, Data Type e Allow Nulls, como mostra Figura 2.19:
Figura 2.19.
ASP.NET AJAX
29
8. Clique com o boto direito sobre ProjetoId e selecione Set Primary Key, como mostra a prxima gura. Isso torna o campo ProjetoId a chave primria da nossa tabela.
Figura 2.20.
9. Ainda em ProjetoId, na janela Column Properties marque a opo Yes na propriedade (Is Identity), como mostra a Figura 2.21:
Figura 2.21.
10. Clique em Salvar. Surgir uma caixa de dilogo Choose Name, solicitando o nome para a tabela. Digite Projetos e clique em OK, como mostra a Figura 2.22 .

30
Figura 2.22.
11. Vamos adicionar alguns registros na nossa tabela. Para isso, na janela Database Explorer, clique com o boto direito sobre a tabela Projetos e selecione Show Table Data ( Figura 2.23 ).
Figura 2.23.
12. Preencha as colunas Nome e Completa, conforme a prxima imagem. Note que o campo ProjetoId autonumervel como desejamos quando o tornamos chave primria e marcamos a opo Identity.
Figura 2.24.
ASP.NET AJAX
31
13. Para realizar o acesso aos dados em nossas aplicaes, vamos utilizar um Dataset tipado. H vrias tcnicas para criar uma camada de acesso a dados, mas o Dataset tipado juntamente com o TableAdapter uma das formas mais simples de realizar essa tarefa. Para adicionar um Dataset tipado, proceda como zemos para adicionar um banco de dados, mas, na janela Add New Item, em vez de escolher a opo SQL Database, selecione a opo Dataset. Vamos chamar o nosso Dataset de ProjetosDataset.xsd, como mostra a Figura 2.25:
Figura 2.25.
14. O Dataset, assim como o banco de dados, pode ser adicionado em uma pasta especca. No caso do Dataset, a pasta App_ Code. Clique em Sim na mensagem ilustrada pela Figura 2.26 para que a pasta seja criada e o Dataset adicionado na mesma.
Figura 2.26.
15. Um Assistente chamado TableAdapter Conguration Wizard iniciado. Selecione o nome do nosso banco de dados na opo Wich data connection should your application use to connect to the database? e clique em Next >.

32
Figura 2.27.
16. O prximo passo decidir se deseja que a string de conexo ao banco de dados seja adicionada ao arquivo de congurao. Clique em Yes, save the connection as:, como mostra Figura 2.28, e clique em Next.
Figura 2.28.
17. Podemos fazer o acesso aos dados de duas formas: usando comandos SQL, e por meio de Stored Procedures. Marque a opo Use SQL Statements e clique em Next > ( Figura 2.29 ).
ASP.NET AJAX
33
Figura 2.29.
18. Clique no boto Query Builder.
Figura 2.30.
19. Na janela Add Table, selecione a tabela Projetos, na guia Tables, e clique em Add. Em seguida, clique em Close ( Figura 2.31). A tabela Projetos vai ser adicionada na janela Query Builder.

34
Figura 2.31.
20. A janela Query Builder nos ajuda na criao dos comandos SQL. Selecione ProjetoID, Nome e Completa na tabela Projetos e digite a clusula WHERE, como mostra a Figura 2.32:
Figura 2.32.
21. Clique em OK. 22. A prxima janela exibe o comando SQL criado pelo Query Builder e permite que voc faa ajustes se necessrio. O comando deve ser igual ao mostrado na prxima gura. Clique em Next > ( Figura 2.33 ).
ASP.NET AJAX
35
Figura 2.33.
Na prxima tela ( Figura 2.34 ), voc pode escolher e nomear os mtodos que deseja que o assistente crie para manipulao e recuperao dos dados.
Figura 2.34.
23. Para nosso exemplo, no vamos utilizar o mtodo Fill, ento desmarque esta opo. 24. Mude o nome do mtodo Return a DataTable para GetProjetosPorStatus, como mostra a Figura 2.35.

36
Figura 2.35.
25. Clique em Next >. A prxima tela ( Figura 2.36 ) resume todas as tarefas que sero realizadas pelo assistente.
Figura 2.36.
26. Clique em Finish. A tabela adicionada ao Dataset, como mostra a Figura 2.37.
ASP.NET AJAX
37
Figura 2.37.
27. Vamos testar o mtodo GetProjetosPorStatus. Para isso, clique com o boto direito sobre o mesmo e selecione Preview Data ( Figura 2.38 ):
Figura 2.38.
Ser exibida a janela Preview Data ( Figura 2.39 ):

38
Figura 2.39.
28. No parmetro Completa, digite false em Value e clique em Preview ( Figura 2.40 ). Sero exibidos os registros que tiverem o valor false na coluna Completa.
Figura 2.40.
29. Volte ao arquivo Default.aspx e adicione os seguintes controles: 1 DropDownList 1 GridView 1 DetailsView 30. Organize-os como mostra a Figura 2.41:
ASP.NET AJAX
39
Figura 2.41.
31. Na propriedade items controle DropDownList1, adicione o Item Completo com valor true e o item Incompleto com o valor false, como mostram as Figuras 2.42 e 2.43:
Figura 2.42.
Figura 2.43.

40
32. No GridView1, na propriedade DataSourceID, clique em New Data Source. Ser iniciado um Assistente. 33. Selecione Object e na opo Where will the application get data from? clique em OK, como mostra a Figura 2.44:
Figura 2.44.
Selecionamos Object na tela anterior porque vamos recuperar nossos dados utilizando o objeto Dataset que criamos. O prximo passo do assistente permite que selecionemos o objeto TableAdapter. O TableAdapter contm o mtodo que criamos para recuperar os dados da nossa tabela. Ele foi criado quando criamos o Dataset. 34. Na tela seguinte, selecione a opo como mostra a Figura 2.45 e, em seguida, clique Next >.
Figura 2.45.
ASP.NET AJAX
41
Voc pode agora escolher o mtodo do TableAdapter que deseja. Ns s temos um mtodo, o GetProjetosPorStatus ( Figura 2.46 ).
Figura 2.46.
35. Clique em Next> para continuar. 36. Agora temos um passo importante. O GridView1 exibir os valores de acordo com a opo escolhida no DropDownList1. Se o valor do DropDownList1 for Completo, ou seja, true sero exibidos apenas os registros que o campo Completa tiverem o valor true. Se o valor do DropDownList1 for Incompleto, ou seja, false sero exibidos apenas os registros que o campo Completa tiverem o valor false. Para isso, em Parameter source selecione Control. Em ControlID, selecione DropDownList1 ( Figura 2.47).
Figura 2.47.
37. Clique em Finish. 38. Na Smart Tag do GridView1, marque as opes conforme a Figura 2.48:

42
Figura 2.48.
39. Usaremos o controle DetailsView1 para inserir novos Projetos. Para isso, na Smart Tag do DetailsView1, selecione Enable Inserting e tambm escolha ObjectDataSource1 em Choose Data Source, como mostra Figura 2.49:
Figura 2.49.
40. Antes de testar nossa aplicao, marque a propriedade AutoPostBack, do controle DropDownList1, como true. Seno, ao selecionarmos uma opo, no ser disparado o Post que atualiza o GridView. 41. Execute sua aplicao. Perceba que, cada vez que voc muda a opo do DropDownList1, a pgina totalmente recarregada ( Figura 2.50 ). Acontece o mesmo se voc inserir um novo projeto.
ASP.NET AJAX
43
Figura 2.50.
Vamos agora implementar o AJAX ASP.NET para fazer atualizaes parciais da pgina, sem a necessidade de recarregar a pgina completamente toda vez que uma opo for selecionada. 42. Adicione um controle UpdatePanel, como mostra a Figura 2.51. Ele est localizado na guia AJAX Extensions na Toolbox.
Figura 2.51.

44
43. Arraste o GridView1 para dentro do UpdatePanel1, como mostra a Figura 2.52:
Figura 2.52.
44. Na janela Properties, localize a propriedade Triggers do UpdatePanel1, e na janela UpdatePanelTrigger Collection Editor clique em Add. Selecione DropDownList1, na propriedade ControlID, e SelectedIndexChanged, para a propriedade EventName. Clique em OK ( Figura 2.53 ).
Figura 2.53.
ASP.NET AJAX
45
Voc vai aprender mais sobre a propriedade Trigger no prximo captulo. 45. Execute a aplicao. 46. Perceba agora que a cada seleo do DropDownList1 apenas o GridView1 atualizado ( Figura 2.54 ). No necessrio o recarregamento de toda a pgina.
Figura 2.54.
Voc vai aprender detalhes sobre o UpdatePanel e o uso de Trigger no prximo captulo. Por enquanto, apenas entenda o seguinte: j que o DropDownList1 est fora do UpdatePanel1 precisamos indicar ao mesmo que o DropDownList1 ser o responsvel por realizar a chamada da atualizao do que est dentro do UpdatePanel1. Para isso, usamos a Trigger. 47. Adicione alguns projetos, como na Figura 2.55:
Figura 2.55.

46
Perceba que, ao inserirmos novos projetos, a pgina ainda totalmente recarregada. Vamos resolver isso agora. 48. Pare a aplicao e volte pgina Default.aspx. 49. Adicione mais um UpdatePanel1 e mova o DetailsView1 para dentro do mesmo, como mostra a Figura 2.56:
Figura 2.56.
50. Localize a propriedade UpdateMode, do UpdatePanel2, e selecione a opo Conditional ( Figura 2.57).
Figura 2.57.
ASP.NET AJAX
47
51. Execute a aplicao ( Figura 2.58 ).
Figura 2.58.
Agora, tanto ao usar o DropDownList1 quanto o DetailsView1 voc obtm o recarregamento parcial da pgina. 52. Para nalizar, apenas quero apresentar para voc o controle UpdateProgress. Para isso, adicione o mesmo sua pgina Default.aspx e digite dentro dele o texto Atualizando, como mostra a Figura 2.59 :
Figura 2.59.

48
O contedo deste controle ser exibido enquanto a pgina recarregar algum dos UpdatePanels. Como nosso exemplo bem simples e o recarregamento bem rpido, se voc executar a pgina agora no vai conseguir visualizar o texto por ser muito rpida sua apresentao. Para que voc possa ver o texto, vamos manipular a Thread no momento de atualizao do GridView1, fazendo com que leve ao menos trs segundos. Para isso, siga os prximos passos. 53. Selecione o ObjectDataSource1 e, na janela Properties, clique no boto Events. Isso faz com que todos os eventos do ObjectDataSource1 sejam exibidos. Localize o evento Updating e d um clique duplo sobre o mesmo (Figura 2.60 ).
Figura 2.60.
Ser criado o procedimento do evento no painel de cdigo. 54. Digite dentro do procedimento o seguinte cdigo: System.Threading.Thread.Sleep(3000) Seu painel de cdigo deve car como mostra a Figura 2.61:
ASP.NET AJAX
49
Figura 2.61.
55. Vamos testar. Execute a aplicao (F5). 56. Clique em Editar para qualquer projeto; altere o nome, por exemplo, e clique em Atualizar. Dever aparecer o texto Atualizando, conforme a Figura 2.62:
Figura 2.62.
Neste captulo, voc aprendeu como fcil construir aplicaes com o AJAX utilizando o Framework AJAX ASP.NET e conheceu os seus principais controles.

50
Captulo 3
O controle UpdatePanel
No captulo anterior, voc j utilizou o UpdatePanel e pde comprovar os benefcios que ele proporciona s suas aplicaes. Usando o UpdadePanel, voc pode atualizar partes especcas da pgina, sem a necessidade de usar nenhum cdigo Javascript. Com isso, voc tem uma boa reduo no trco entre navegador, cliente e servidor, diminuindo o uso de banda. Lembre-se: assim como os demais controles, o UpdatePanel trabalha em conjunto com o controle ScriptManager, ento o mesmo deve estar ou ser adicionado na pgina quando voc for utilizar o UpdatePanel. Neste captulo, faremos uma prtica em que voc aprender: usar triggers; trabalhar com vrios UpdatePanel em uma mesma pgina; usar UpdatePanel aninhados; atualizar e criar UpdatePanel programaticamente; conhecer os controles que no so compatveis com o UpdatePanel. 1. Crie uma nova aplicao usando o Template ASP.NET AJAXEnabled Web Site chamada UpdatePanel, como mostra a Figura 3.1. Neste exemplo, usaremos a linguagem C#.
Figura 3.1.

52
2. Adicione dois controles TextBox e um controle Button na pgina Default.aspx, e organize-os conforme a Figura 3.2:
Figura 3.2.
3. D um clique duplo sobre a pgina Default.aspx e, no painel de cdigo, digite o seguinte cdigo dentro do procedimento do evento Page_Load:
TextBox1.Text = DateTime.Now.ToString(); TextBox2.Text = DateTime.Now.ToString();
Para a linguagem Visual Basic, voc usar a mesma linguagem s que sem o ponto-e-vrgula. Desta forma:
TextBox1.Text = DateTime.Now.ToString() TextBox2.Text = DateTime.Now.ToString()
Esse cdigo tem por objetivo atribuir o valor da data e hora atual nas duas caixas de texto. Seu painel de cdigo deve estar como a Figura 3.3:
53
Figura 3.3.
4. Execute e teste sua aplicao. Perceba que, ao clicar no boto, a data e hora atual so exibidas em cada uma das caixas de texto ( Figura 3.4 ).
Figura 3.4.
5. Pare a execuo da aplicao. 6. Adicione um controle UpdatePanel na pgina Default.aspx e mova os controles TextBox2 e Button1 para dentro do mesmo, conforme a Figura 3.5:

54
Figura 3.5.
7. Execute a aplicao. 8. Clique sobre o boto e, perceba que agora, apenas a caixa de texto que est dentro do UpdatePanel executada. Temos ento um carregamento assncrono dentro do UpdatePanel, usando o AJAX ( Figura 3.6 ).
Figura 3.6.
9. Pare a execuo da aplicao. Qualquer controle dentro de um UpdatePanel dispara uma atualizao assncrona, ou seja, uma atualizao apenas dentro do UpdatePanel. Se a propriedade ChildrenAsTrigger estiver com valor True, essa propriedade ser sempre True por padro. Se voc deixar essa
55
propriedade como false, os controles dentro do UpdatePanel no chamaro uma atualizao assncrona. muito difcil alteramos a propriedade ChildrenAsTrigger porque geralmente pelo menos um dos controles dentro do UpdatePanel usado para solicitar atualizao assncrona. No entanto, algumas vezes precisamos que um controle especco que est dentro do UpdatePanel no chame uma atualizao assncrona. Voc vai ver como fazer isso agora. 10. Clique sobre o UpdatePanel1 para selecion-lo e, na janela Properties, localize e clique sobre a propriedade Triggers, como mostra a Figura 3.7.:
Figura 3.7.
11. Na janela UpdatePanelTrigger, clique na seta indicando para baixo ao lado do boto Add, como mostra a Figura 3.8:
Figura 3.8.

56
Perceba que so exibidas duas opes: AsyncPostBackTrigger e PostBackTrigger. 12. Clique sobre PostBackTrigger. 13. Em ControlID, selecione o controle Button1, como a mostra a Figura 3.9:
Figura 3.9.
14. Clique em OK. O cdigo HTML referente ao controle UpdatePanel1 deve estar assim:
<asp:UpdatePanel ID =UpdatePanel1 runat=server> <ContentTemplate> <asp:TextBox ID =TextBox2 runat=server></ asp:TextBox><br /> <asp:Button ID =Button1 runat=server OnClick=Button1 _ Click Text=Button /> </ContentTemplate> <Triggers> <asp:PostBackTrigger ControlID =Button1 /> </Triggers> </asp:UpdatePanel>
Note no cdigo anterior que a tag <Triggers> quem faz refrencia ao controle que no vai disparar uma atualizao assncrona.
57
15. Execute a aplicao. Perceba que, ao clicar no boto, toda a pgina atualizada novamente, pois as duas caixas de texto so atualizadas com a data. 16. Pare a execuo do programa. 17. Arraste o Button1 para fora do UpdatePanel, como mostra a Figura 3.10 :
Figura 3.10.
18. Da mesma forma que voc pode usar uma trigger para fazer com que um controle dentro do UpdatePanel no chame uma atualizao assncrona, voc pode tambm usar uma trigger para fazer com que um controle fora do UpdatePanel execute uma atualizao assncrona. Para isso, clique novamente sobre o UpdatePanel1 para selecion-lo e, na janela Properties, localize e clique sobre a propriedade Triggers. 19. Desta vez, selecione a opo AsyncPostBackTrigger no boto Add, como mostra a Figura 3.11:
Figura 3.11.

58
20. Na propriedade ControlID selecione Button1 e na propriedade EventName selecione Click ( Figura 3.12 ).
Figura 3.12.
Agora, toda vez que o evento Click do Button1 for disparado, ser solicitada uma atualizao assncrona. O HTML do UpdatePanel deve estar agora semelhante a esse:
<asp:UpdatePanel ID =UpdatePanel1 runat=server> <ContentTemplate> <asp:TextBox ID =TextBox2 runat=server></ asp:TextBox><br /> </ContentTemplate> <Triggers> <asp:AsyncPostBackTrigger ControlID =Button1 EventName=Click /> </Triggers> </asp:UpdatePanel>
Note no cdigo anterior que a tag <Triggers> quem faz refrencia ao controle e ao evento que dispara a atualizao assncrona. 21. Execute e teste sua aplicao. Vamos entender agora a propriedade UpdateMode, usada quando temos mais do que um UpdatePanel na mesma pgina. 22. Adicione mais um UpdatePanel pgina e arraste o controle TextBox1 para dentro do mesmo, como mostra a Figura 3.13:
59
Figura 3.13.
23. Execute a aplicao. Perceba que sempre que voc clica no Button1 os dois UpdatePanel so atualizados ( Figura 3.14 ).
Figura 3.14.

60
24. Selecione o UpdatePanel2 e mude a propriedade UpdateMode para Conditional, como mostra a Figura 3.15:
Figura 3.15.
Quando a propriedade UpdateMode est denida como always que, por sinal, o valor padro qualquer controle na pgina que dispara uma atualizao assncrona atualiza o UpdatePanel em questo. Quando esta mesma propriedade foi denida como Conditional, apenas os controles dentro do mesmo ou com trigger apontada para o mesmo efetuam atualizao assncrona. No h limite em relao ao nmero de UpdateControls a serem utilizados em uma pgina. 25. Execute a aplicao. Agora, ao clicar no boto, apenas o UpdatePanel1 deve ser atualizado ( Figura 3.16 ).
Figura 3.16.
61
26. Adicione um Button dentro do UpdatePanel2 . 27. Arraste o UpdatePanel2 para dentro do UpdatePanel1, conforme mostra a Figura 3.17:
Figura 3.17.
A regra aqui simples. Se os dois controles UpdatePanel estiverem com a propriedade UpdateMode com o valor Conditional, ao clicar no boto dentro do UpdatePanel lho, ou seja, aquele que est dentro do outro, apenas ele ser atualizado. J o UpdatePanel pai sempre atualizar ele e todos os UpdatePanel que estiverem dentro dele. 28. Certique-se que a propriedade UpdateMode dos dois controles UpdatePanel estejam como Conditional. 29. Execute e teste a aplicao. Perceba que, ao clicar no boto dentro do UpdatePanel2, somente o mesmo atualizado. J ao clicar no boto que est dentro do UpdatePanel1 disparada a atualizao assncrona dos dois controles UpdatePanel.

62
Agora vamos aprender a atualizar e criar UpdatePanel programaticamente. 30. Adicione mais um Button sua aplicao, fora de qualquer UpdatePanel, como mostra a Figura 3.18:
Figura 3.18.
Se voc executar sua pgina agora, esse boto no far nenhuma solicitao assncrona. Ao clicar sobre ele, a pgina completamente atualizada. 31. D um clique duplo sobre o Button que voc acabou de adicionar e digite o seguinte cdigo no procedimento de evento do mesmo:
UpdatePanel1.Update();
Isso ainda no o suciente para realizar uma atualizao assncrona. Precisamos registrar o controle como uma trigger. Fazemos isso adicionando o seguinte cdigo no procedimento de evento Page_Load:
63
ScriptManager1.RegisterAsyncPostBackControl(Button3);
Button3 o nome ou ID do Button que adicionamos. 32. Execute sua aplicao e teste. Agora, voc j capaz de chamar uma atualizao assncrona programaticamente. 33. Agora, vamos criar um controle UpdateControl programaticamente. Para isso, adicione uma nova pgina sua aplicao com o nome de Default2.aspx. 34. Adicione um controle ScriptManager nesta pgina. 35. Dentro da classe Default2, adicione o seguinte cdigo:
UpdatePanel up1 = new UpdatePanel(); Button Button1 = new Button(); TextBox TextBox1 = new TextBox(); protected void Page _ Load(object sender, EventArgs e) { up1.ID = UpdatePanel1; up1.UpdateMode = UpdatePanelUpdateMode.Conditional; Button1.ID = Button1; Button1.Text = Button; Button1.Click += new EventHandler(Button1 _ Click); TextBox1.ID = TextBox1; up1.ContentTemplateContainer.Controls.Add(Button1); up1.ContentTemplateContainer.Controls.Add(TextBox1); Page.Form.Controls.Add(up1); } protected void Button1 _ Click(object sender, EventArgs e) { TextBox1.Text = DateTime.Now.ToString(); }

64
Seu painel de cdigo deve estar assim ( Figura 3.19 ):
Figura 3.19.
A seguir, o mesmo cdigo para a linguagem Visual Basic .NET:

Dim up1 As New UpdatePanel() Dim Button1 As New Button() Dim TextBox1 As New TextBox() Protected Sub Page _ Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load up1.ID = UpdatePanel1 up1.UpdateMode = UpdatePanelUpdateMode.Conditional Button1.ID = Button1 Button1.Text = Button AddHandler Button1.Click, AddressOf Button1 _ Click TextBox1.ID = TextBox1 up1.ContentTemplateContainer.Controls.Add(Button1) up1.ContentTemplateContainer.Controls.Add(TextBox1) Page.Form.Controls.Add(up1) End Sub
65
Protected Sub Button _ Click(ByVal Sender As Object, ByVal E As EventArgs) TextBox1.Text = DateTime.Now.ToString() End Sub
36. Execute e teste sua aplicao ( Figura 3.20 ).
Figura 3.20.
Vamos agora compreender o cdigo. Primeiramente, criamos os trs objetos que vamos utilizar na nossa pgina.
1 UpdatePanel; 1 Button; 1 TextBox;
Fizemos isso com o cdigo a seguir:

UpdatePanel up1 = new UpdatePanel(); Button Button1 = new Button(); TextBox TextBox1 = new TextBox();
O segundo passo foi atribuir um identicador nico para o UpdatePanel que criamos e atribuir o valor Conditional sua propriedade UpdateMode. Neste exemplo, no precisvamos ter alterado a propriedade UpdateMode para este contexto, mas por motivo didtico mostrei como realizar esta tarefa.
up1.ID = UpdatePanel1; up1.UpdateMode = UpdatePanelUpdateMode.Conditional;

66
Tambm precisamos atribuir um identicador nico para os controles TextBox e Button, j que os criamos programaticamente tambm. Fizemos isso usando as seguintes linhas de cdigo:
Button1.ID = Button1; TextBox1.ID = TextBox1;
A propriedade Text do Button1 foi modicada para Button apenas para o boto no exemplo no ser exibido em branco.
Button1.Text = Button;
Depois, criamos um manipulador de evento para o Button1 com a seguinte linha de cdigo, em que Button1_Click o nome de um procedimento que criamos.
Button1.Click += new EventHandler(Button1 _ Click);
O cdigo a seguir mostra o procedimento Button1_Click. nele que atribumos o valor da data e hora atual a TextBox1.
protected void Button1 _ Click(object sender, EventArgs e) { TextBox1.Text = DateTime.Now.ToString(); }
Ns precisamos vincular os controles TextBox1 e Button1 no UpdatePanel. Fazemos isso adicionando os controles na propriedade ContentTemplateContainer do UpdatePanel usando o seguinte cdigo:
up1.ContentTemplateContainer.Controls.Add(Button1); up1.ContentTemplateContainer.Controls.Add(TextBox1);
Para nalizar, vinculamos o nosso UpdateControl pgina usando o cdigo:

Page.Form.Controls.Add(up1);
Nestes exemplos voc j deve ter percebido o poder e o que voc ser capaz de fazer facilmente utilizando o UpdatePanel. Para nalizar,
67
existem alguns controles que no podem ser utilizados dentro do UpdatePanel. Segue uma descrio deles, alm de algumas regras a serem seguidas: TreeView, Menu, Substitution e WebParts; FileUpload; GridView e DetaisView, quando estiverem com a propriedade EnableSortingAndPagingCallbacks com o valor true; os controles Login, PasswordRecovery, ChangePassword e CreateUserWizard s podem ser usados se forem convertidos em Templates; os controles BaseCompareValidator, BaseValidator, CompareValidator, CustomValidator, RangeValidator, RegularExpressionValidator, RequeredFieldValidator e ValidationSummary s podem ser usados se estiverem com a propriedade EnableClientScript como false.

68
Captulo 4
O controle Timer
O controle Timer permite a atualizao da pgina em intervalos de tempo denidos. Neste captulo, faremos uma prtica onde voc entender o que e como utilizar o controle Timer. 1. Crie uma nova aplicao usando o Template ASP.NET AJAXEnabled Web Site chamada Timer, como mostra Figura 4.1. Neste exemplo, usarei a linguagem C#.
Figura 4.1.
2. Verique se o controle ScriptManager j est adicionado na pgina, caso no esteja, adicione o mesmo utilizando a guia AJAX Extensions na Toolbox. 3. Adicione um controle UpdatePanel na pgina. 4. Dentro deste UpdatePanel adicione um Label e um controle Timer. O controle Timer est localizado na guia AJAX Extensions na Toolbox. Organize-os como na Figura 4.2:

70
Figura 4.2.
5. D um clique duplo sobre o controle Timer1 e, no procedimento de evento criado Timer1_Tick, digite o seguinte cdigo:
Label1.Text = Atualizado em: + DateTime.Now.ToString();
Em VB.NET o cdigo quase o mesmo apenas sem o ponto-evrgula, como segue:

Label1.Text = Atualizado em: + DateTime.Now.ToString()
Seu painel de cdigo deve estar assim ( Figura 4.3 ):
O controle Timer
71
Figura 4.3.
O evento Tick executado no servidor sempre que o controle Timer executar uma atualizao. Este evento semelhante ao Click do boto, mas disparado em intervalos de tempos denidos pela propriedade Interval. 6. Selecione o controle UpdatePanel1 e, na janela Properties, localize a propriedade Interval. Seu valor padro 60.000 milissegundos, ou seja, 60 segundos ou 1 minuto. Altere este valor para 3.000 milissegundos (3 segundos), como mostra a Figura 4.4:
Figura 4.4.

72
Observao: quanto menor o intervalo de tempo, mais solicitaes o controle efetuar ao servidor, aumentando o trfego de rede e o consumo de banda. Procure utilizar o maior intervalo de tempo possvel para o contexto de suas aplicaes. 7. Execute e teste sua aplicao. Perceba que h aproximadamente cada trs segundos atualizada a data e hora no Label1. Quando eu digo aproximadamente isso mesmo, voc vai entender por que agora: 8. Adicione o seguinte cdigo dentro do procedimento de evento Timer1_Tick, como mostra a Figura 4.5:
System.Threading.Thread.Sleep(3000);
Em VB.NET o cdigo quase o mesmo apenas sem o ponto-evrgula, como segue:

System.Threading.Thread.Sleep(3000)
Figura 4.5.
Este cdigo no novidade para voc nesta altura do livro. Novamente, vamos retardar um pouco o processamento do mtodo por motivos didticos.
O controle Timer
73
9. Execute sua aplicao. Perceba que a atualizao executada a cada seis segundos e no trs como conguramos na propriedade Interval. Isso acontece sempre que o controle Timer estiver dentro do UpdatePanel. A contagem iniciada sempre que a antiga solicitao nalizada. Como no nosso exemplo este tempo de trs segundos ele foi somado ao tempo do controle Timer. Mas, em nossas aplicaes, dicilmente sabemos o tempo exato que vai levar uma atualizao assncrona, porque ela depende do volume de dados que est sendo trafegado e da utilizao de banda. 10. Com o objetivo de realizar a atualizao a exatamente cada trs segundos, vamos arrastar o controle Timer1 para fora do UpdatePanel, como mostra Figura 4.6:
Figura 4.6.
11. Como um controle qualquer, como um Button, por exemplo, para que o controle Timer efetue uma chamada de atualizao assncrona em um UpdatePanel necessrio associ-los utilizando Trigger. Para isso, selecione o UpdatePanel e clique sobre a propriedade Triggers. Na janela UpdatePanelTrigger, adicione uma AsyncPostBack Trigger para o controle Timer1, e o evento Tick, como mostra a Figura 4.7:

74
Figura 4.7.
12. Execute sua aplicao. Agora sim, a exatamente cada trs segundos a atualizao efetuada. Fique atento, visualize a seguinte circunstncia: O controle Timer efetua uma atualizao assncrona a cada trs segundos. Mas uma das atualizaes demora mais do que trs segundos para ser nalizada. Ento, antes que a atualizao acabe iniciada uma outra. O que acontece com a primeira que no acabou ainda? A resposta : a primeira atualizao, a que no nalizou ainda, terminada e a nova iniciada. Segue o cdigo HTML do controle UpdatePanel1. Atente para a propriedade Trigger sendo congurada:
<asp:UpdatePanel ID =UpdatePanel1 runat=server> <ContentTemplate> <asp:Label ID =Label1 runat=server Text=Label></asp:Label> </ContentTemplate> <Triggers> <asp:AsyncPostBackTrigger ControlID =Timer1 EventName=Tick /> </Triggers> </asp:UpdatePanel>
13. Pare a execuo da sua aplicao e vamos agora compreender como trabalhar com mltiplos UpdatePanel. 14. Adicione mais um UpdatePanel e um Label dentro do mesmo, como mostra a Figura 4.8:
O controle Timer
75
Figura 4.8.
15. Congure a propriedade UpdateMode dos controles UpdatePanel1 e UpdatePanel2 como Conditional. 16. Para o UpdatePanel2, adicione uma AsyncPostBackTrigger para o controle Timer1 e o evento Tick. 17. Adicione o cdigo a seguir no procedimento Timer1_Tick, como mostra a Figura 4.9.
Label2.Text = Atualizado em: + DateTime.Now.ToString();
Figura 4.9.

76
18. Execute sua aplicao. Agora, a cada trs segundos ambos UpdatePanel sero atualizados usando apenas um nico controle Timer. Mas e se voc precisar atualizar cada um dos UpdatePanel em intervalos de tempo diferentes? Para responder essa pergunta, continuamos nosso exemplo. 19. Adicione mais um controle Timer, como mostra a gura a seguir:
Figura 4.10.
20. Modique a propriedade Trigger do UpdatePanel2 para o controle Timer2, como mostra a Figura 4.11:
Figura 4.11.
O controle Timer
77
21. D um clique duplo sobre o controle Timer2. Mova o cdigo que atualiza o Label2 para dentro do mesmo, como mostra a Figura 4.12:
Figura 4.12.
22. Altere a propriedade Interval, do controle Timer2, para 5.000 (5 segundos) ( Figura 4.13 ).
Figura 4.13.
23. Execute sua aplicao. Agora o UpdatePanel1 atualizado a cada trs segundos e o UpdatePanel2 atualizado a cada cinco segundos. Com este exemplo concludo, voc capaz de utilizar o controle Timer em suas aplicaes ASP.NET AJAX.

78
Captulo 5
A classe PageRequestManager
At agora em todos os nossos exemplos no usamos Javascript ou DOM, mas eles podem ser necessrios nas seguintes circunstncias: controlar como mltiplas atualizaes assncronas so processadas. Por padro, a ltima atualizao se sobrepe primeira, mas podemos controlar isso usando Javascript e DOM; disponibilizar informaes sobre a atualizao assncrona que est sendo executada. Isso melhora a experincia do usurio com a pgina, principalmente quando temos mltiplos controles UpdatePanel; possibilidade de cancelar uma atualizao assncrona enquanto a mesma processada; exibir mensagens de erro customizadas; enviar para o servidor informaes de controles que no esto sendo usados na atualizao assncrona. Um exemplo seria enviar para o servidor o valor de um TextBox que est fora de um UpdatePanel que est sendo processado. Isso permite que o valor do TextBox seja utilizado no cdigo que est sendo processado no servidor e inuencie o resultado da atualizao assncrona. A classe PageRequestManager disponibiliza no cliente (por ser uma classe em Javascript) um modelo de eventos semelhante ao modelo de eventos usado no servidor para uma aplicao ASP.NET. Esta classe possui mtodos, propriedades e eventos que permitem que voc customize a atualizao assncrona utilizando Javascript e DOM. Para conhecer melhor o Javascript e o DOM consulte o Apndice. Neste captulo, faremos uma prtica que o ensinar a: trabalhar com os eventos da classe PageRequestManager; parar uma atualizao assncrona. 1. Crie uma nova aplicao usando o Template ASP.NET AJAXEnabled Web Site chamada PageRequestManager, como mostra imagem a seguir. Neste exemplo, usarei a linguagem C#.

80
Figura 5.1.
2. Verique se o controle ScriptManager j est adicionado pgina, caso no esteja, adicione o mesmo utilizando a guia AJAX Extensions na Toolbox. 3. Adicione um controle UpdatePanel na pgina. Dentro deste controle, adicione um Label e um Button. 4. Adicione um controle UpdateProgress e dentro dele digite o texto Atualizando... 5. Organize os controles na pgina como mostra a Figura 5.2:
Figura 5.2.
A Classe PageRequestManager
81
6. D um clique duplo sobre o Button1 e digite o seguinte cdigo para o procedimento de evento Button1_Click:
System.Threading.Thread.Sleep(3000); Label1.Text = DateTime.Now.ToString();
Em VB.NET o cdigo diferente apenas por no ter o ponto-evrgula no nal. Seu painel de cdigo deve estar assim ( Figura 5.3 ):
Figura 5.3.
7. Execute e teste sua aplicao ( Figura 5.4 ).
Figura 5.4.

82
At agora, nenhuma novidade. Este um exemplo semelhante aos que zemos at aqui. Mas entenda que, como o ciclo de vida de uma pgina ASP.NET possui uma srie de eventos que so executados consecutivamente, nas atualizaes assncronas tambm temos alguns destes tipos de eventos. Vamos agora conhecer e saber como utilizar esses eventos em nossas aplicaes ASP.NET AJAX. 8. V at o cdigo HTML da pgina. Para isso, clique no boto Source. 9. Localize a seguinte tag:
<asp:ScriptManager ID =ScriptManager1 runat=server />
Esta tag representa o controle ScriptManager que est adicionado nossa pgina. 10. Logo abaixo da tag do controle ScriptManager digite o seguinte cdigo:
<script type=text/javascript> Sys.WebForms.PageRequestManager.getInstance().add _ initiali zeRequest(Exibir); function Exibir(){ alert(InitializeRequest); } </script>
Seu cdigo HTML deve estar assim ( Figura 5.5 ):
Figura 5.5.
83
Esse um bloco de cdigo Javascript. A funo Exibir() exibe a mensagem InitializeRequest, usando o comando Javascript Alert(). A seguinte linha de cdigo recupera uma instncia da classe PageRequestManager e adiciona o mtodo Exibir()como manipulador do evento initializeRequest.
Sys.WebForms.PageRequestManager.getInstance().add _ initiali zeRequest(Exibir);
Vamos executar nosso exemplo para compreender melhor o que este bloco faz. 11. Execute sua aplicao. Ao clicar no boto, exibida a seguinte mensagem:
Figura 5.6.
Isso quer dizer que quando a requisio assncrona foi iniciada, ou seja, quando o evento initializeRequest foi disparado o mtodo Exibir() foi executado. Voc pode e deve criar suas prprias funes para fazer uso desse evento nos seus programas. 12. Modi que o cdigo Javascript criado at agora para o seguinte:
<script type=text/javascript> var prm = Sys.WebForms.PageRequestManager.getInstance(); prm.add _ initializeRequest(Exibir); function Exibir(){ alert(InitializeRequest); } </script>

84
Este cdigo faz a mesma coisa que o anterior, mas separa um pouco melhor o cdigo deixando-o mais claro e legvel, facilitando assim a manipulao de outros eventos como faremos a seguir. Nele, criamos uma varivel chamada prm e atribumos a ela a instncia da classe PageRequestManager. Para isso, usamos o mtodo getInstance(). Isso facilita o uso dos eventos porque usamos a varivel com a instncia do mtodo para atribuir o mtodo Exibir() ao evento initializeRequest. Voc no pode criar uma instncia da classe PageRequestManager diretamente. Esta classe est sempre disponvel quando o controle ScriptManager e o UpdatePanel esto na sua pgina realizando atualizao assncrona. Por isso, sempre que voc precisar utilizar essa classe deve recuperar sua instncia usando o mtodo getInstance(). Seu cdigo HTML deve estar assim ( Figura 5.7):
Figura 5.7.
85
13. Vamos conhecer um outro evento, o beginRequest. Digite o seguinte cdigo dentro do script em Javascript, logo abaixo da funo Exibir():
prm.add _ beginRequest(Exibir2); function Exibir2(){ alert(BeginRequest); }
Este cdigo muito semelhante ao outro que acabamos de conhecer, apenas estamos usando outro evento que executado aps o evento initializeRequest. Seu cdigo HTML deve estar assim:
Figura 5.8.
14. Execute e teste sua aplicao. Agora, aps o evento initializeRequest, executado o evento beginRequest, como mostra a Figura 5.9:
Figura 5.9.

86
Os prximos trs eventos que so executados sempre que uma solicitao assncrona executada so estes: pageLoading, pageLoaded e endRequest. Vamos demonstr-los: 15. Digite o seguinte cdigo, logo abaixo da funo Exibir2():
prm.add _ pageLoading(Exibir3); function Exibir3(){ alert(PageLoading); } prm.add _ pageLoaded(Exibir4); function Exibir4(){ alert(PageLoaded); } prm.add _ endRequest(Exibir5); function Exibir5(){ alert(EndRequest); }
Seu script em Javascript deve estar assim:

<script type=text/javascript> var prm = Sys.WebForms.PageRequestManager.getInstance(); prm.add _ initializeRequest(Exibir); function Exibir(){ alert(InitializeRequest); } prm.add _ beginRequest(Exibir2); function Exibir2(){ alert(BeginRequest); } prm.add _ pageLoading(Exibir3); function Exibir3(){ alert(PageLoading); } prm.add _ pageLoaded(Exibir4); function Exibir4(){ alert(PageLoaded); } prm.add _ endRequest(Exibir5);
87
function Exibir5(){ alert(EndRequest); } </script>
16. Execute sua aplicao. Agora, para cada evento, voc ter uma mensagem exibida com o nome do mesmo. Isso demonstra claramente a ordem que os eventos so executados e permite que voc escolha qual evento ser usado em suas aplicaes de acordo com a sua necessidade. Voc tambm deve ter notado que o evento pageLoaded foi executado logo que a pgina foi aberta sem que nenhuma atualizao assncrona tenha sido disparada. Esse o nico evento que disparado em uma atualizao sncrona tambm. 17. Mude o cdigo da funo Exibir() para o seguinte:
function Exibir(sender, args){ alert(args.get _ postBackElement().id); }
18. Execute sua aplicao e teste. Perceba que agora, no mtodo initializeRequest, o identicador, ou seja, o ID do boto foi exibido ( Figura 5.10 ). O mtodo get _ postBackElement() permite que voc recupere uma instncia do objeto que executou uma solicitao assncrona, e, a partir da, voc poder usar o DOM e o Javascript para manipul-lo no lado cliente.
Figura 5.10.
Avalie o seguinte cdigo para a funo Exibir():

function Exibir(sender, args){ var obj = args.get _ postBackElement(); alert(obj.id); }

88
Aqui utilizamos o mtodo get _ postBackElement()para recuperar o objeto e atribuir o mesmo varivel obj que facilita o seu uso. Este cdigo faz o mesmo que o anterior s que de forma mais clara e organizada. Vamos agora conhecer o mtodo abortPostBack(), para a execuo de uma atualizao assncrona. 19. Localize a guia HTML na barra de ferramentas e adicione um controle Button, dentro do UpdateProgress, como mostra a Figura 5.11:
Figura 5.11.
Foi utilizado um controle HTML porque este boto s vai ser utilizado no lado cliente. 20. Selecione esse Button e mude a sua propriedade Value para Cancelar, como mostra a Figura 5.12:
89
Figura 5.12.
21. Adicione o cdigo a seguir dentro do script em JavaScript, como mostra a prxima imagem:
function Cancelar(){ prm.abortPostBack(); }
Figura 5.13.
Este cdigo simples e demonstra claramente como utilizar o mtodo abortPostBack(). Lembre-se que prm uma varivel que tem uma instncia da classe PageRequestManager.

90
22. Ainda no cdigo HTML, localize o cdigo HTML do Button que est dentro do UpdateProgress e modique-o para o seguinte:
<input id=Button2 onclick=Cancelar() /> type=button value=Cancelar
A modicao foi simples, apenas adicionamos o evento onclick que chama a funo Cancelar(). A seguir ( Figura 5.14 ), a modicao no cdigo HTML:
Figura 5.14.
23. Execute e teste sua aplicao. Agora, se voc clicar em Cancelar, a atualizao parada imediatamente ( Figura 5.15 ).
Figura 5.15.
91
Para nalizar, quero que voc conhea a propriedade isInAsyncPostBack. Ela contm o valor true, se a atualizao ou PostBack que est sendo efetuado assncrono, e tem o valor false, se a atualizao for sncrona. Vamos utiliz-la: 24. Altere o cdigo da funo Exibir4() para a seguinte:
function Exibir4(){ if (prm.get _ isInAsyncPostBack()){ alert(PageLoaded); } }
Aqui, zemos o uso do mtodo get _ isInSyncPostBack para recuperar o valor da propriedade isInAsyncPostBack da classe PageRequestManager que est sendo referenciada pela varivel prm. Ento, se o valor for true, a mensagem do mtodo alert() ser exibida, se o valor for false, no. 25. Execute e teste sua aplicao novamente. Perceba que agora, ao iniciar a aplicao, a mensagem que estava sendo exibida pelo evento PageLoaded no foi exibida. Isso porque na funo Exibir4(), que utilizada por esse evento, estamos vericando se a atualizao assncrona e, nesse caso, o valor false. J ao usar a atualizao assncrona, a mensagem exibida normalmente.

92
Captulo 6
Usando ASP.NET AJAX em aplicaes j existentes
Para usar o ASP.NET AJAX em uma aplicao j existente voc precisa fazer algumas modicaes no arquivo Web.cong. Nos passos a seguir, vamos entender melhor na prtica quais so essas modicaes: 1. Crie uma nova aplicao ASP.NET normal. Utilize o Template ASP.NET Web Site, como mostra Figura 6.1:
Figura 6.1.
2. Abra o arquivo Web.cong. 3. Adicione o seguinte cdigo, logo abaixo da tag <con guration> :
<congSections> <sectionGroup name=system.web.extensions type=System. Web.Conguration.SystemWebExtensionsSectionGroup, System. Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicK eyToken=31bf3856ad364e35> <sectionGroup name=scripting type=System.Web.Conguration.ScriptingSectionGroup, System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad 364e35> <section name=scriptResourceHandler type=System. Web.Configuration.ScriptingScriptResourceHandlerSection, System.Web.Extensions, Version=1.0.61025.0, Culture=neutral,

94
PublicKeyToken=31bf3856ad364e35 requirePermission=false allowDe nition=MachineToApplication/> <sectionGroup name=webServices type=System.Web. Conguration.ScriptingWebServicesSectionGroup, System.Web. Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyT oken=31bf3856ad364e35> <section name=jsonSerialization type=System. Web.Conguration.ScriptingJsonSerializationSection, System. Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicK eyToken=31bf3856ad364e35 requirePermission=false allowDef inition=Everywhere/> <section name=proleService type=System.Web. Conguration.ScriptingProleServiceSection, System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyTok en=31bf3856ad364e35 requirePermission=false allowDe niti on=MachineToApplication/> <section name=authenticationService type=System. Web.Configuration.ScriptingAuthenticationServiceSection, System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35 requirePermission=false allowDe nition=MachineToApplication/> </sectionGroup> </sectionGroup> </sectionGroup> </congSections>
Observe, na Figura 6.2, o local exato onde o cdigo deve ser inserido:
Figura 6.2.

95
Para no ser necessrio digitar todo este texto, crie uma aplicao em branco usando o Template ASP.NET AJAX-Enabled Web Site e copie o cdigo que est no Web.cong. Os elementos inseridos dentro da tag <congSections> criam sees e sub-sees de congurao para a classe SystemWebExtensionsSectionGroup. Voc congura as propriedades para estas sees usando o elemento <system.web.extensions>. 4. Adicione o seguinte cdigo, logo abaixo da tag <pages> :
<controls> <add tagPre x=asp namespace=System.Web. UI assembly=System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35/> </controls>
Figura 6.3.

96
O elemento <controls> registra os namespaces ASP.NET AJAX no assembly System.Web.Extensions e mapeia esses namespaces para serem usados utilizando a tag asp, como neste exemplo em que registramos o controle ScriptManager na pgina:
<asp:ScriptManager ID =ScriptManager1 runat=server> </asp:ScriptManager>
5. Adicione o seguinte cdigo, logo abaixo da tag <compilation> :

<assemblies> <add assembly=System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf385 6ad364e35/> </assemblies> </compilation> <httpHandlers> <remove verb=* path=*.asmx/> <add verb=* path=*.asmx validate=false type=System.Web.Script.Services.ScriptHandlerFactory, System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, Pub licKeyToken=31bf3856ad364e35/> <add verb=* path=* _ AppService.axd validate=false type=System.Web.Script.Services.ScriptHandlerFactory, System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35/> <add verb=GET,HEAD path=ScriptResource.axd type=System.Web.Handlers.ScriptResourceHandler, System.Web. Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyTo ken=31bf3856ad364e35 validate=false/> </httpHandlers> <httpModules> <add name=ScriptModule type=System. Web.Handlers.ScriptModule, System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad 364e35/> </httpModules>
O elemento <assemblies> registra o assembly System.Web.Extensions. O elemento <httpHandlers> adiciona os novos manipuladores de eventos para as requisies via script. O elemento <httpModules> dene os mdulos HTTP que so utilizados em aplicaes ASP.NET AJAX.

97
Figura 6.4.
Observe na imagem que no cdigo anterior tambm temos uma leve mudana na tag <compilation>. Precisamos retirar a barra que encerra essa tag para inserir a tag <assemblies>. A tag <compilation> ca assim:
<compilation debug=false strict=false explicit=true >
Essas so as modicaes necessrias no Web.cong. No necessria nenhuma outra modicao. Agora, adicione os controles ASP.NET AJAX necessrios na sua aplicao. Lembre-se de adicionar o controle ScriptManager em todas as pginas que for utilizar o ASP.NET AJAX.

98
Apndice
JavaScript
Para utilizar o JavaScript em uma pgina HTML, usada a tag <script> e com o atributo type denido como: text/javascript. Exemplo:
<script type=text/javascript> //cdigos JavaScript </script>
Assim, o navegador entender que no contedo dessa tag h comandos Javascript para serem executados. Voc pode inserir seu cdigo Javascript em trs locais na pgina HTML, so eles: Arquivo externo com extenso .js; No head entre as tags <head> e </head>; No body entre as tags <body> e </body>. Voc pode usar uma combinao desses locais tambm. Vamos conhecer a peculiaridade de cada uma delas.
Arquivo externo com extenso .js

O arquivo externo chamado desta forma:
<head> <script type=text/javascript src=externo.js></script> </head>
Ou seja, por meio do atributo src da tag <script>, indicamos a localizao do arquivo externo, assim o navegador pode localiz-lo e execut-lo. Em arquivos externos no utilizamos a tag <script>, somente os cdigos. Vamos conhecer algumas das vantagens de se trabalhar dessa forma: Facilidade na manuteno: uma vez que o script est localizado em apenas um arquivo, voc tem um local central para edio ou correo dos cdigos; Carregamento mais rpido da pgina: o arquivo externo armazenado no cache do navegador. Assim, o navegador no precisa baix-lo em todas as pginas que fazem referncia ao mesmo;

100
Semntico: o arquivo externo separa a camada de comportamento (Javascript) da camada de contedo (HTML).
No head entre as tags <head> e </head>

O script inserido desta forma:
<head> <script type=text/javascript> //cdigos JavaScript </script> </head>
Os cdigos Javascript localizados entre as tags <head> e </head> da pgina so executados ao serem chamados, ou seja, quando algum evento for provocado, como o evento onclick, onmouseover, onload, entre outros. Nessa forma, o script carregando antes de algum utiliz-lo, ou seja, antes do carregamento do contedo que est entre as tags <body> e </body>.
No body entre as tags <body> e </body>

O script inserido desta forma:
<body> <script type=text/javascript> //cdigos JavaScript </script> </body>
Os cdigos inseridos entre as tags <body> e </body> da pgina so inicialmente executados enquanto a pgina carregada, mas tambm podem ser chamados quando algum evento for provocado.
A tag <noscript>
A tag <noscript> nos permite disponibilizar um contedo alternativo ao disposto via script. Isso signica que dentro desta tag disponibilizamos contedo para o usurio que no tiver suporte ao Javascript em seu navegador.
Apndice
101
Veja um exemplo:
<script type=text/javascript> alert(Ol fulano.); </script> <noscript> <p>Ol fulano.</p> </noscript>
No exemplo anterior ser exibida a mensagem Ol fulano, atravs do alert() uma funo do JavaScript que exibe uma mensagem atravs de um popup box para quem tem suporte ao JavaScript. Caso contrrio, a mesma mensagem aparecer para quem no tem suporte ao JavaScript, porm, atravs da tag <noscript> na forma de texto.
Comentrios em Javascript
Tudo que estiver englobado pelos comentrios ignorado pelo interpretador do JavaScript. H dois tipos de comentrios, so eles: // e /* */. O primeiro o comentrio de uma linha somente, enquanto o segundo suporta vrias linha e conhecido como comentrio de bloco. Observe os exemplos:
<script type=text/javascript> // Comentrio de uma linha. /* Comentrio de vrias linhas, o interpretador ignora todo esse contedo. O que nos permite a criao de notas e lembretes em nossos cdigos. */ </script>
Ainda sobre comentrios em JavaScript, observe que os navegadores que no o suportam iro exibi-lo como se fosse parte do contedo da pgina. Para prevenir essa prtica, utilizamos o comentrio em HTML associado ao cdigo JavaScript.
<head> <script type=text/javascript> <!-//cdigos JavaScript //-->

102
</script> </head>
As duas barras (//), antes do fechamento do comentrio, previnem que o interpretador do JavaScript as interpretem.
Case Sensitive
Javascript uma linguagem Case Sensitive, ou seja, diferencia minsculas de maisculas. Meu diferente de meu em Javascript. Ento, tenha ateno ao digitar os comandos e usar as variveis Javascript em suas aplicaes.
Ponto-e-vrgula (;) no final das declaraes

Uma boa prtica ao programar utilizando JavaScript sempre usar o ; (ponto-e-vrgula) no nal das suas declaraes, mas seu uso no obrigatrio. Voc precisa utilizar o ponto-e-vrgula se utilizar algum compressor de JavaScript para reduzir o tamanho do arquivo. Como os compressores distribuem os cdigos em uma nica linha, sem eles ser impossvel determinar onde comea e termina uma instruo, ocasionando erro.
Variveis
Vejamos um exemplo de como declarar uma varivel:
var nomeVariavel = valorVariavel;
ou
nomeVariavel = valorVariavel;
Voc pode criar uma varivel com ou sem a declarao var, mas aconselhvel utiliz-la. Quando criamos uma varivel dentro de uma funo, a tornamos local, ou seja, acessvel somente dentro da funo em que foi criada. J as variveis globais, so declaradas fora das funes e cam acessveis a toda e qualquer funo na pgina em que a varivel esteja. Exemplo de como atribuir um valor a uma varivel:
numeroFuncionario = 23;
Apndice
103
Entendemos pelo sinal de igual como recebe. Assim, numeroFuncionario recebe 23.
Operadores
Operadores so usados para representar expresses de clculo, comparao, condio e atribuio. Portanto, temos os seguintes tipos de operadores:
Operadores aritmticos
Operador Representao em Javascript Exemplo
Multiplicao Diviso Mdulo Adio Subtrao Incremento Decremento
* / % + ++ --
a * b Multiplica-se o valor de a por b. a / b Divide-se o valor de a por b. a % b Retorna o resto da diviso de a por b. a + b Soma de a e b. a b Subtrao de a com b. a ++ Neste caso, somado 1 ao valor de a. a -- Neste caso, subtrado 1 do valor de a. Tabela Ap. 1: Operadores aritmticos.
Operadores de relacionais
Operador Representao em Javascript > Exemplo
Maior
a > b Se o valor de a for maior que o valor de b, ento o resultado dessa expresso verdadeiro, seno falso. a >= b Se o valor de a for maior ou igual que o valor de b, ento o resultado dessa expresso verdadeiro, seno falso.
Maior ou igual
>=
Menor
< a < b Se o valor de a for menor que o valor de b, ento o resultado dessa expresso verdadeiro, seno falso.

104
Menor ou igual
<=
a <= b Se o valor de a for menor ou igual que o valor de b, ento o resultado dessa expresso verdadeiro, seno falso. a == b Se o valor de a for igual ao valor de b, ento o resultado dessa expresso verdadeiro, seno falso. a === b Se o valor e o tipo de dado de a for igual a b, ento o resultado dessa expresso verdadeiro, seno falso. a != b Se o valor de a for diferente do valor de b, ento o resultado dessa expresso verdadeiro, seno falso.
Igual a
==
Igual a (compara === o valor e o tipo)
Diferente de
!=
Tabela Ap. 2: Operadores de relacionais.
Operadores lgicos
Operador Representao em Javascript && Exemplo
a == 5 && b > 9 Caso o valor de a seja igual a cinco e o valor de b maior que nove, o resultado verdadeiro, seno falso. a == 5 || b > 9 Se o resultado de a for igual a cinco ou o valor de b for maior que nove, ento o resultado verdadeiro. O resultado s ser falso se as duas expresses retornarem falso. ! a == 5 Se o resultado de a for igual a 5 ,ento o resultado ser falso. O operador no inverte o resultado da expresso. Tabela Ap. 3: Operadores lgicos.
Ou
||
No
Apndice
105
Operadores de atribuio
Operador Exemplo o mesmo que = += -= *= /= %= x=y x+=y x-=y x*=y x/=y x%=Y x=y x=x+y x=x-y x=x*y x=x/y x=x%y
Tabela Ap. 4: Operadores de atribuio.
Operador condicional
Operador condicional aquele que atribui um valor a uma determinada varivel com base em uma condio, ou seja, se a condio for verdadeira, teremos um valor x, caso contrrio, um valor y. Conhea a sintaxe desse tipo de condio:
nomeDaVarivel = (condio) ? valorSeVerdadeiro : valorSeFalso;
Agora, observe um exemplo para uma melhor compreenso:

var nota = 65; var resposta = (nota >= 60) ? Aprovado. : Reprovado.;
No exemplo anterior, zemos o seguinte processo: inicialmente temos uma varivel denominada nota com o valor 65. Em seguida, a varivel resposta com um valor condicional, ou seja, se o valor da varivel nota for maior ou igual a 60, teremos o valor Aprovado, caso contrrio, teremos Reprovado.
Estruturas de controle
Como o prprio nome diz, as estruturas de controle servem para controlar a execuo dos nossos programas. Elas so dividas em:

106
Estruturas de deciso
Em Javascript temos as seguintes estruturas de deciso:
Declarao if
Sintaxe:
if (condio) { //cdigo a ser executado quando a condio for verdadeira. }
Exemplo:
var idade = 19; if(idade >= 18) { alert(Voc pode ter sua carteira de motorista); }
No exemplo anterior, a declarao if verica se a varivel idade maior ou igual a 18. Como a condio verdadeira, ou seja, a varivel idade tem o valor 18, ser exibido o texto Voc pode ter sua carteira de motorista.
Declarao if...else
Sintaxe:
if (condio) { //cdigo a ser executado quando a condio for verdadeira. } else { //cdigo a ser executado quando a condio for falsa. }
Exemplo:
var sexo = feminino; if(sexo == masculino) { alert(Homem!); } else { alert(Mulher!); }
Apndice
107
No exemplo anterior, a declarao if verica se a varivel sexo igual a masculino. Como a condio falsa, ou seja, a varivel sexo no tem o valor masculino, e sim, feminino, ser exibido o texto Mulher.
Declarao if...else if...else

Sintaxe:
if (condio) { //cdigo a ser executado quando a condio for verdadeira. } else if (2 condio) { //cdigo a ser executado quando a 2 condio for verdadeira. } else { //cdigo a ser executado quando a primeira e a segunda condio forem falsas. }
Exemplo:
var moeda = Dlar; if(moeda == Real) { alert(Voc precisa usar o Real!); } else if(moeda == Dlar) { alert(Voc precisa usar o Dlar!); } else { alert(Voc no pode usar nem o dlar nem o real!); }
No exemplo acima, realizamos duas vericaes: perguntamos se a varivel moeda tem o valor Real (a primeira). Caso seja verdadeiro, exibir o texto Voc precisa usar o Real!; e perguntamos se a mesma varivel tem o valor Dlar (a segunda). Neste caso, exibir o texto Voc precisa usar o Dlar! Caso a varivel no tenha nenhum dos dois valores Real ou Dlar exibir o texto Voc no pode usar nem o dlar nem o real!.
Declarao switch
Sintaxe:
switch(expresso) { case valor 1: //cdigo a ser executado se a expresso = valor 1;

108
break case valor 2: //cdigo a ser executado se a expresso = valor 2; break default: //cdigo a ser executado se a expresso for diferente do valor 1 e valor 2; }
Exemplo:
var estado = PR; switch(estado) { case PR: alert(Voc mora no Paran.); break case SP: alert(Voc mora em So Paulo.); break case SC: alert(Voc mora em Santa Catarina.); break default: alert(Em que estado voc mora?); }
Temos a varivel estado com o valor PR . Iniciamos nossa declarao condicional com o switch, passando a ele como parmetro a expresso (varivel) estado. Ento, utilizamos o case. Para isso, necessrio vericar o seguinte: se o valor da varivel for PR exibimos um texto, se for SP exibimos outro, e assim por diante; se o valor da varivel no coincidir com nenhum dos valores nos cases, exibimos um texto padro (default). O valor da expresso comparado com os valores de cada case da estrutura. Caso ocorra um valor semelhante, o cdigo a ele associado executado; O break previne que o prximo case seja executado automaticamente;
Estruturas de Repetio
Em Javascript temos as seguintes estruturas de repetio:
Apndice
109
Loop For
Sintaxe:
for (var = valorInicial; var <= valorFinal; var = var + incremento) { //cdigo a ser executado. }
Exemplo:
var numero = 1; for (numero = 1; numero <= 10; numero++) { alert(Nmero atual: + numero); }
No exemplo anterior, temos a varivel numero que inicia com 1 e, em seguida, um loop for que funciona da seguinte maneira: temos o valor inicial (1) e o valor nal (10) para a varivel numero, seguido de um incremento (++). Isso signica dizer que o loop iniciar com a varivel numero com o valor 1 e nalizar quando ela alcanar um valor maior que 10. O cdigo a ser executado ser uma mensagem de alerta dizendo ao usurio o nmero atual do looping. Resumindo: enquanto a varivel nmero for menor ou igual 10 o cdigo ser executado.
Loop while
Sintaxe:
while (var <= valorFinal) { //cdigo a ser executado. }
Exemplo:
var numero = 1; while (numero <= 10) { alert(Nmero atual: + numero); numero = numero + 1; }
Conforme voc pode ver no exemplo do loop while, o cdigo executado enquanto a condio for verdadeira.

110
Loop do...while
Sintaxe:
do { //cdigo a ser executado. } while (var <= valorFinal);
Exemplo:
var numero = 1; do { alert(Nmero atual: + numero); numero = numero + 1; } while (numero < 1).
Essa estrutura igual ao While, s que a condio veri cada no nal do bloco de cdigo. Por isso, mesmo que o valor da condio seja falso, ele vai executar o cdigo associado pelo menos uma vez.
Break
O comando break interrompe a execuo do loop. Exemplo:
var numero = 15; for (numero = 15; numero < 20; numero++) { if(numero == 17) { break; } alert(Nmero: + numero); }
Utilizamos a condio if para detectar quando a varivel numero estiver no nmero 17. Quando isto ocorrer, utilizamos o comando break para interromper o loop, assim, chegaremos somente at o nmero 17.
Continue
O comando continue interrompe o loop em um determinado momento e continua com o mesmo:
Apndice
111
var idade = 24; for (idade = 24; idade <= 34; idade++) { if(idade == 30) { continue; } alert(Voc tem + idade + anos ?); }
No exemplo anterior, o loop for deveria rodar do nmero 24 at o 34, porm, o comando continue interrompe a exibio do nmero 30.
Pop-up boxes
Existem trs tipos de Pop-up boxes com Javascript. So elas:
Alert
Exemplo:
alert(Voc esta usando o ALERT);
No navegador a aparecer como mostra a Figura Ap. 1.
Figura Ap. 1.
Conrm
Exemplo:
conrm(Voc esta usando o CONFIRM);
A Figura Ap. 2 ilustra nosso exemplo:
Figura Ap. 2.

112
Prompt
Exemplo:
prompt(Voc esta usando o PROMPT,);
Veja na Figura Ap. 3 como o navegador se comportar:
Figura Ap. 3.
No comando prompt voc pode sugerir uma resposta ( Figura Ap. 4 ). Exemplo:
prompt(Voc esta usando o PROMPT,E sugerindo uma resposta);
Figura Ap. A.4.
Funes
Funo um conjunto de cdigos a serem executados para uma determinada nalidade. Quando voc estiver escrevendo seus programas, vai notar que muitos cdigos digitados so iguais, ou seja, que voc precisa digit-los em vrios locais. As funes auxiliam nisso, voc pode criar funes e depois cham-las em seu programa sempre que for necessrio. Voc pode chamar uma funo de qualquer lugar da pgina ou at mesmo de outras pginas contanto que o script esteja em um arquivo externo (.js). As funes podem conter parmetros ou no. Quando eles existem, so informados funo quando a chamamos.
Apndice
113
Questes importantes sobre o uso de funes

a palavra function sempre deve ser escrita com letras minsculas; o nome da funo pode conter letras minsculas e/ou maisculas; as chaves { } indicam o incio e o trmino da funo; mesmo que uma funo no contenha parmetros, os parnteses ( ) devem ser includos aps o nome da funo.
Sintaxe sem parmetros

function nomeDaFuncao() { //cdigos referente funo. }
Exemplo:
function HelloWorld() { alert(Ol mundo.); } // Exemplo para cham-la. <a href=# onclick=javascript: HelloWorld();>Chamar a Funo</a>
Sintaxe com parmetros

function nomeDaFuncao(varivel 1, variavel 2, ...) { //cdigos referente funo. }
Exemplo:
function HelloWorld(nome) { alert(Ol + nome); } // Exemplo para cham-la. <a href=# onclick=javascript:HelloWorl d(Moroni);>Chamar a Funo</a>
Esta mensagem pode ser personalizada uma vez que o parmetro passado a ela o nome de algum usurio.

114
Quando queremos que uma funo retorne algum valor, utilizamos a declarao return, que tem o papel de especicar o valor retornado pela funo. Exemplo:
function calculo(valor1,valor2) { total = valor1 * valor2; return total; } // Chamando a funo atravs do alert(). alert(calculo(23,5));
No exemplo anterior, chamamos a funo calculo fornecendo a ela dois parmetros: valor1 (23) e valor2 (5). Nessa funo, temos a varivel total que multiplica os dois parmetros informados e retorna o valor utilizando o return.
Eventos
Podemos denir um evento como uma ocorrncia ou algum acontecimento realizado por uma pgina, uma ao do mouse, teclado, entre outros. Esses eventos podem ser detectados pelo Javascript e disparar cdigo associado aos mesmos. Em muitos dos casos, os eventos so utilizados em combinao com as funes. Isso signica dizer que a funo no ser executada at que o evento ocorra. Vamos conhecer os principais eventos: onclick O evento onclick ocorre quando o usurio clica sobre algum elemento da pgina, por exemplo: um link, uma imagem, um boto entre outros. Exemplo:
onclick=javascript:nomeDaFuncao(parametroSeHouver);
onload e onunload O evento onload executado quando uma pgina HTML carregada por completa, incluindo as imagens. J o evento onunload ocorre quando o usurio sai de uma pgina. Eles so opostos entre si.
Apndice
115
Exemplo:
<body onload=nomeDaFuncao(); onunload=nomeDaFuncao();>
onmouseover e onmouseout Enquanto o evento onmouseover acionado quando o mouse se localiza na rea de um elemento, o onmouseout executado quando o mouse sai dessa rea. Exemplo:
onmouseover=funcaoParaMouseOver(); onmouseout=funcaoParaMouseOut();
onsubmit Para realizarmos a validao de um formulrio, utilizamos o evento onsubmit, o que signica dizer: ao enviar os dados do formulrio. Esse evento trabalha em conjunto com uma funo da seguinte forma: associamos ao formulrio a chamada de uma funo e esta tem por objetivo validar os dados submetidos e retornar um valor verdadeiro (true) ou falso (false). Se o valor retornado for verdadeiro, o formulrio enviado, caso contrrio, o envio bloqueado at que os dados sejam preenchidos como desejamos. Exemplo:
onsubmit=return confereFormulario();
O evento onclick tambm pode chamar uma funo para validar um formulrio, assim como outros eventos. onfocus, onblur e onchange Esses trs eventos so utilizados na maioria das vezes em associao com algum elemento de formulrio. O evento onfocus ocorre quando o usurio clica em um link ou em um campo de texto e o foco mantido at que outro elemento o ganhe.

116
J o onblur executado quando o elemento perde o foco. O exemplo mais clssico para o evento onchange (ao trocar/mudar) quando alteramos uma opo na lista de um combobox. Nessa ao, ocorre o onchange. Exemplos: onfocus=funcaoParaFocus(); onblur=funcaoParaBlur(); <select ... onchange=funcaoParaChange(); ...>
onkeydown, onkeypress e onkeyup Esses trs eventos so utilizados em associao com o teclado. Com eles, podemos contar os caracteres de uma textarea, realizar o preview de algum texto, efetuar uma busca instantnea, entre outras opes. Os eventos onkeydown e onkeypress so semelhantes e ocorrem quando uma tecla pressionada pelo usurio em seu teclado. J o onkeyup executado quando a tecla liberada, ou seja, ela foi pressionada e em seguida liberada.
Exemplos:
onkeydown=funcaoParaKeyDown(); onkeypress=funcaoParaKeyPress(); ... onkeyup=funcaoParaKeyUp(); ...
Arrays
O Array possibilita armazenarmos diversos valores em uma nica varivel. Dessa forma, seria uma varivel com vrios valores e esses valores so armazenados e acessados por meio de uma ordem. Como exemplo, imagine uma varivel com o nome escalacaoBrasil. Para ela, precisaremos armazenar onze valores, uma vez que o time tem onze jogadores. Veja o exemplo a seguir. O objeto Array denido por uma palavra-chave new.
var escalacaoBrasil = new Array(); var escalacaoBrasil = new Array(11);
Apndice
117
Ambos os exemplos anteriores esto corretos. A diferena entre eles que o segundo informa o tamanho (valor total) que o Array ter atravs do nmero inteiro (integer) 11 (onze). Agora, vamos conhecer duas formas para criarmos um Array.
var escalacaoBrasil = new Array(); escalacaoBrasil [0] = Gomes; escalacaoBrasil [1] = Cicinho; escalacaoBrasil [2] = Gilberto; escalacaoBrasil [3] = Lucio; escalacaoBrasil [4] = Juan; escalacaoBrasil [5] = Gilberto Silva; escalacaoBrasil [6] = Mineiro; escalacaoBrasil [7] = Kaka; escalacaoBrasil [8] = Ronaldinho Gaucho; escalacaoBrasil [9] = Robinho; escalacaoBrasil [10] = Fred; var escalacaoBrasil = new Array(Gomes, Cicinho, Gilberto, Lucio, Juan, Gilberto Silva, Mineiro, Kaka, Ronaldinho Gaucho, Robinho, Fred);
Os valores podem ser acessados assim:

alert(diasDaSemana[4]); // Exibir: Juan.
Portanto, para referenciarmos um valor dentro de um Array, basta indicarmos o nome do Array e o ndice numrico do valor. importante lembrar que o ndice numrico se inicia com 0 (zero). Se voc especicar algum nmero ou os valores true/false (verdadeiro/falso) como o valor de um Array, o tipo da varivel ser numrica e Booleana respectivamente, ao invs de string.
Os mtodos mais utilizados pelo objeto Array()

Mtodo join() shift() pop() reverse() Descrio Coloca todos os elementos de um Array em uma string e os separam por um delimitador especicado. Retorna o primeiro valor de um Array e remove os demais. Retorna o ltimo elemento de um Array e remove os demais. Inverte a ordem dos elementos de um Array.

118
slice() sort()
Retorna os elementos selecionados de um Array. Ordena os elementos de um Array. Tabela Ap. 5: Mtodos mais utilizados do objeto Array().
Data
Para trabalharmos com datas e horrios em JavaScript fazemos uso do objeto Date(). Exemplo:
var dataAtual = new Date(); alert(dataAtual);
No exemplo anterior, teremos a data e o horrio atual, ou seja, o exato momento em que o script foi executado. O resultado aparecer no formato a seguir:
Mon Jun 26 2006 15:29:13 GMT-0300 (Hora ocial do Brasil)
Para manipular esse resultado, existem vrias prticas ecientes. Veja um novo exemplo adaptado ao nosso formato dd/mm/aaaa.
var data = new Date(); var mes = new Array(12) mes[0] = Janeiro; mes[1] = Fevereiro; mes[2] = Maro; mes[3] = Abril; mes[4] = Maio; mes[5] = Junho; mes[6] = Julho; mes[7] = Agosto; mes[8] = Setembro; mes[9] = Outubro; mes[10] = Novembro; mes[11] = Dezembro; alert(data.getDate() + / + mes[data.getMonth()] + / + data.getFullYear());
No exemplo anterior, utilizamos o objeto Date e trs de seus mtodos: getDate(), getMonth() e getFullYear().
Apndice
119
O primeiro retorna o dia do ms (de 1 a 31), o segundo, o ms (de 0 a 11), e o ltimo o ano com quatro dgitos. O diferencial neste ltimo est na utilizao do Array para o ms, uma vez que o mtodo getMonth() retorna nmeros de 0 (zero) a 11 (onze) e, assim, o nmero 4 (quatro) representaria o ms de maio, diferentemente de nossa representao usual, onde esse ms representado pelo algarismo 5 (cinco). Assim, utilizamos um Array para atribuirmos o nome do ms (pode ser algarismos tambm) de acordo com o nmero retornado pelo mtodo.
Os mtodos mais utilizados pelo objeto Date()

Mtodo Date() getDate() getDay() getMonth() getFullYear() getHours() getMinutes() getSeconds() getMilliseconds() getTimezoneOffset() Descrio Retorna a data e o horrio atual. Retorna o dia do ms (1-31). Retorna o dia da semana (0-6). Retorna o ms (0-11) Retorna o ano com quatro dgitos. Retorna a hora (0-23). Retorna os minutos (0-59). Retorna os segundos (0-59). Retorna os milissegundos (0-999). Retorna a diferena em minutos entre o tempo local e o do Meridiano de Greenwich (GMT).
Tabela Ap. 6: Mtodos mais utilizados do objeto Date().
Os mtodos na tabela anterior precisam atuar em conjunto com o objeto Date() porque que so mtodos desse objeto. Sua utilizao da seguinte forma:
// Uma forma new Date().nomeDoMetodo(); // Outra forma var data = new Date(); data.nomeDoMetodo();

120
String
O objeto string utilizado para manipular um texto armazenado em uma varivel. importante ressaltar que, alm do objeto string, h a string literal. Quando utilizamos alguns dos mtodos do objeto string na string literal, essa ltima convertida automaticamente e temporariamente em um objeto string. Por exemplo, o mtodo length retorna a quantidade de caracteres em uma string. Isso porque a string literal no um objeto ento no pode conter mtodos, fazendo-se necessria a converso da mesma para um objeto. Veja a utilizao desse mtodo abaixo em ambos os casos:
var texto1 = AJAX; var texto2 = new String(AJAX ); alert(A varivel texto1 contm: + texto1.length + caracteres.); alert(A varivel texto2 contm: + texto2.length + caracteres.);
No exemplo anterior, teremos o valor trs nos dois casos (string literal texto1; objeto string texto2) porque trs o total de caracteres contido em AJAX. Os mtodos mais utilizados do objeto String()
Mtodo indexOf() Descrio Retorna a posio da primeira ocorrncia de um valor especicado em uma string. Retorna a posio da ltima ocorrncia de um valor especicado em uma string. Procura por um valor especco em uma string. Se encontrado, ele (valor) retornado, caso contrrio, retorna null. Substitue alguns caracteres por outros caracteres em uma string.
lastIndexOf()
match()
replace()
Apndice
121
toLowerCase() toUpperCase() substr()
Exibe os caracteres da string em minsculos. Exibe os caracteres da string em maisculos. Extrai uma quantidade especca de caracteres de uma string a partir de um ndice inicial. Extrai os caracteres de uma string entre dois ndices.
substring()
Tabela Ap. 7: Mtodos mais utilizados do objeto string().
Math
O objeto Math disponibiliza diversos valores e funes para nos ajudar na realizao de operaes matemticas. A seguir, uma relao dos valores matemticos que podem ser acessados pelo objeto Math.
Math Math.E Math.PI Math.SQRT2 Math.SQRT1_2 Math.LN2 Math.LN10 Math.LOG2E Nome E PI square root of 2 square root of 1/2 natural log of 2 natural log of 10 base-2 log of E base-10 log of E Valor 2.718281828459045 3.141592653589793 1.4142135623730951 0.7071067811865476 0.6931471805599453 2.302585092994046 1.4426950408889634 0.4342944819032518
Math.LOG10E
Tabela Ap. 8: Valores matemticos que podem ser acessados pelo objeto Math.
Mtodos (funes) matemticas

ceil() Arredonda o valor informado para cima at o nmero inteiro mais prximo. Exemplo:
var numero = 6.1; alert(Math.ceil(numero)); // Exibir o valor 7.

122
oor() Arredonda o valor informado para baixo at nmero inteiro mais prximo. Exemplo:
var numero = 6.1; alert(Math.oor(numero)); // Exibir o valor 6.
max() Retorna o nmero de maior valor entre dois nmeros especi cados.
var numero1 = 6.7; var numero2 = 3.8; alert(Math.max(numero1,numero2)); // Exibir o valor 6.7
min() Retorna o nmero de menor valor entre dois nmeros especi cados.
var numero1 = 6.7; var numero2 = 3.8; alert(Math.min(numero1,numero2)); // Exibir o valor 3.8
random() Retorna um nmero entre 0 e 1.

alert(Math.random()); alert(Math.random()*59); // Exibir nmeros aleatrios entre 0 e 59 - Exemplo: 58.92792655560298
round() Arredonda o valor informado para o nmero inteiro mais prximo, seja positivo ou negativo.
var numero1 = 6.7; alert(Math.round(numero1)); // Exibir o valor 7 var numero2 = -3.8; alert(Math.round(numero2)); // Exibir o valor -4
Apndice
123
CONHEA OUTROS TTULOS SOBRE PROGRAMAO

Curso de Lgica de Programao
Por meio de uma linguagem bastante objetiva aliada a exemplos e exerccios prticos, o autor mostra passo a passo como desenvolver a lgica de programao necessria para que o prossional desenvolva softwares em qualquer linguagem. Trata-se de um livro ideal para quem est dando os primeiros passos nesta rea, para quem freqenta um curso de programao de computadores ou para quem deseja se aprimorar tecnicamente na rea de programao. Por meio dele, voc aprende: Construo de algoritmos Montagem de uxograma Diagrama de dados e pseudocdigos Tipos de dados, variveis, operadores e instrues Matrizes, registros e constantes Identao de cdigo Estruturas de dados e controle Ordenao e pesquisas em matrizes Mtodos de pesquisa seqencial e binria Modularizao e recursividade Codicao em Pascal Linguagem estruturada x Linguagem orientada a objetos E muito mais...
Entendendo e Dominando o Java para Internet

De alguns anos para c, o Java se consolidou como a linguagem mais usada por programadores e grandes corporaes em todo o mundo. Somado a esse sucesso do Java, vem a crescente demanda por aplicativos que estejam totalmente integrados ao ambiente Web. Essa demanda veio acompanhada de aumento no grau de exigncia para o prossional, que precisa ter alto nvel de conhecimento, ser extremamente capacitado e possuir experincia e slidos conhecimentos na linguagem. Para atender a essas demandas paralelas, Entendendo e Dominando o Java para Internet traz explicaes e exemplos completos que facilitam o aprendizado dos sosticados recursos do Java e ensinam a combin-los para desenvolver aplicativos on-line. A estrutura do livro foi projetada com base em um mtodo de ensino de eccia comprovada, desenvolvida em anos de execuo de treinamentos intensivos e semi-intensivos em faculdades e empresas, para os mais diversos tipos de alunos, com os mais diferentes nveis de conhecimento em programao. Com isso, temos certeza de que o Entendendo e Dominando o Java para Internet ajudar o leitor em sua busca por informao e especializao.
Universidade C
Universidade C estruturado como um curso universitrio em que o contedo didtico passado de maneira gradativa para que voc aprenda tudo o que necessrio para dominar uma das mais poderosas linguagens de programao existentes. Para facilitar o aprendizado e testar os exemplos do livro impresso, o livro vem acompanhado de uma coleo de 3 CDs-ROMs, que foram o kit do programador trazendo dezenas de software, cdigos e exemplos prontos.
Entendendo e Dominando o Delphi

Em sua dcima verso, o Delphi fornece quatro linguagens de programao: Delphi for Win32 e C++ para criar aplicaes Windows, e Delphi for .NET e C# para aplicaes na plataforma .NET, todas abordadas neste livro. Assim, o Entendendo e Dominando o Delphi ideal para quem deseja ter um aprendizado gradual da linguagem de programao, com codicao em Delphi e em C++. Trata-se de uma traduo autorizada do Inside Delphi 2006, um dos livros de programao mais vendidos em todo o mundo!
Entendendo e Dominando o PHP

O Entendendo e Dominando o PHP um livro indicado para todos aqueles que pretendem desenvolver websites usando a linguagem PHP a partir da verso 5.0, que traz como grande inovao o fato de permitir o uso de todo o potencial da orientao a objetos. Entre os tpicos abordados no livro esto: orientao a objetos, classes, objetos e mtodos; argumentos e tipos de dados; uso de herana; construo de interfaces; manipulao de excees; interceptadores; denio do projeto do cdigo; programao procedural e orientada a objetos; polimorsmo e encapsulamento; uso da UML para construir diagramas de classes; padres de projeto; executao e representao de tarefas; documentao com o phpDocumentor; controle de verses com CVS; construo automtica com Phing; reusabilidade e muito mais...
Visite nossa loja virtual em www.universodoslivros.com.br e conra nossas promoes.

Ajax PDF

Caricato da

Informazioni sul documento

Titolo originale

Copyright

Formati disponibili

Condividi questo documento

Condividi o incorpora il documento

Opzioni di condivisione

Hai trovato utile questo documento?

Questo contenuto è inappropriato?

Copyright:

Formati disponibili

Ajax PDF

Caricato da

Copyright:

Formati disponibili

Herbert Moroni

CRIAO DE SITES EM AJAX

Tudo sobre a linguagem que revolucionou a Internet

Tudo sobre a linguagem que revolucionou a Internet

Captulo 2 ASP.NET AJAX ............................................................. 21

Pr-requisitos para o curso

Criao de sites em AJAX

Criao de sites em AJAX

5. Organize os controles como a Figura 1.5:

Vai car assim:

Criao de sites em AJAX

&B= + document.getElementById(Text2).value; ajax.open(GET,url,true); ajax.onreadystatechange = atualizar; ajax.send(); } </script>

Criao de sites em AJAX

Vai car assim:

Criao de sites em AJAX

Apenas clique em OK para habilitar o Debug. A seguinte janela se abre:

Criao de sites em AJAX

Consideraes sobre o uso do AJAX

Criao de sites em AJAX

Instalando o AJAX ASP.NET

Criao de sites em AJAX

4. Na pgina que se abre, clique no boto Download ASP.NET AJAX v1.0.

Criao de sites em AJAX

9. Clique em Install para continuar ( Figura 2.8 ).

A instalao foi concluda com sucesso.

Conhecendo o AJAX ASP.NET

Criao de sites em AJAX

Criao de sites em AJAX

Criao de sites em AJAX

Criao de sites em AJAX

18. Clique no boto Query Builder.

Criao de sites em AJAX

Criao de sites em AJAX

Ser exibida a janela Preview Data ( Figura 2.39 ):

Criao de sites em AJAX

Criao de sites em AJAX

Criao de sites em AJAX

Criao de sites em AJAX

Criao de sites em AJAX

51. Execute a aplicao ( Figura 2.58 ).

Criao de sites em AJAX

Criao de sites em AJAX

Criao de sites em AJAX

Criao de sites em AJAX

Criao de sites em AJAX

Criao de sites em AJAX

Criao de sites em AJAX

Criao de sites em AJAX

Criao de sites em AJAX

Seu painel de cdigo deve estar assim ( Figura 3.19 ):

A seguir, o mesmo cdigo para a linguagem Visual Basic .NET:

36. Execute e teste sua aplicao ( Figura 3.20 ).

Fizemos isso com o cdigo a seguir:

Criao de sites em AJAX

Para nalizar, vinculamos o nosso UpdateControl pgina usando o cdigo:

Criao de sites em AJAX

Criao de sites em AJAX

Em VB.NET o cdigo quase o mesmo apenas sem o ponto-evrgula, como segue:

Seu painel de cdigo deve estar assim ( Figura 4.3 ):

Criao de sites em AJAX

Em VB.NET o cdigo quase o mesmo apenas sem o ponto-evrgula, como segue:

Criao de sites em AJAX

Criao de sites em AJAX