Desenvolvimento - Javascript

Experimentando o Intellisense para Javascript do Visual Studio 2008

Nunca foi tão fácil programar em Javascript como agora. Pela primeira vez, o Visual Studio passa a contar com o suporte total a Intellisense, depuração e comentário de código no melhor estilo C#. Neste artigo, você conhecerá em detalhes o intellisense para javascript do VS 2008.

por Cláudio Ralha


Qualquer desenvolvedor Web, independente da plataforma/linguagem que escolha para desenvolver, invariavelmente terá que conhecer e programar em Javascript. Afinal, ela torna possível boa parte da interatividade que vemos nos browsers e está presente inclusive nas novas soluções Ajax e WPF. Logo, já se sabe que esta boa e velha linguagem ainda fará parte do nosso dia a dia por um bom tempo.

Apesar de sua importância, o Javascript jamais recebeu a atenção devida por parte dos projetistas de IDE. A falta de ferramentas adequadas era sentida especialmente pela baixa produtividade para quem precisava dar manutenção em código escrito na linguagem. No Visual Studio, por exemplo, o máximo que tínhamos até a versão 2005 era a sintaxe colorida e um suporte mínimo de Intellisense, que muitas vezes parava de funcionar do nada. Isso se codificássemos o script na própria página (HTML/ASPX), pois para arquivos de código específicos de javascript e jscript (.js) o Visual Studio se comportava como aquele cara que sabe tudo, mas na hora da prova “dá um branco”. Editar um arquivo .js no Visual Studio era como fazê-lo no notepad, o que acabava inibindo o programador a colocar o código no lugar correto...

Outro fato que contribuía para a morosidade na produção de scripts em javascript era a depuração de código escrito na linguagem. Embora poucos profissionais saibam o debug de javascript já era possível em versões anteriores do Visual Studio, quando este era usado em conjunto com o Internet Explorer. No entanto, o leque de recursos de depuração era bem reduzido se comparado aquele que encontraremos no Visual Studio 2008. Veremos em um artigo a parte como tirar proveito deste recurso há muito aguardado.

Neste artigo, abordaremos as melhorias introduzidas no Intellisense para edição de código em javascript. Se você já trabalhou ou ainda trabalha em uma fábrica de software, gostará muito de conhecê-lo...

Examinando o funcionamento do Intellisense em blocos javascript

Para ver o Intellisense atuando em blocos Javascript, basta criar um projeto do tipo ASP.NET no Visual Studio 2008 (estou usando a versão Beta 2). Na página Default.aspx criada automaticamente pelo template, inclua um bloco para inclusão de scripts em Javascript:

<script language="javascript" type="text/javascript">

</script>

Dentro deste bloco, inicie a digitação da palavra function. Você irá perceber que imediatamente será disponibilizada a lista dinâmica de palavras (comandos, objetos, variáveis, etc) que podem ser usadas dentro do bloco.

Ao começar a usá-lo, note que ele trabalha com tipos por inferência, ou seja, à medida que os blocos de código vão sendo construídos, o VS 2008 vai atualizando a lista do intellisense. Veja neste primeiro teste, onde declaramos a função Somar:

Vamos tentar agora algo um pouco mais elaborado, onde poderemos conferir que de fato o Visual Studio 2008 trabalha por inferência. Para testar, vamos realizar uma alteração no exemplo a seguir:

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="WebApplication1._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" type="text/javascript">

function esconderControle()

{

var div = document.getElementById("divPrincipal");

div.innerHTML = "Sumiu!";

}

</script>

</head>

<body>

<form id="form1" runat="server">

<div id="divPrincipal">

<input id="Button1" type="button" value="Esconder" onclick="esconderControle()" />

</div>

</form>

</body>

</html>

Veja que nele temos uma função Javascript chamada esconderControle, onde declaramos uma variável div usada para acessar um elemento div da página. Após atribuirmos um valor string a variável, observe o que ocorre:

Percebeu a presença de várias funções destinadas a manipulação de strings? Agora, olhe uma vez mais para a figura. Está notando que o Intellisense de certa forma acaba atrapalhando pois não nos permite ver o que está embaixo da lista sugerida, certo? Pois experimente teclar Ctrl enquanto estiver trabalhando com o Intellisense e verá que o mesmo agora fica transparente!

Trabalhando com javascript em arquivos externos

A falta de suporte ao intellisense em arquivos externos .js, que é justamente o local mais indicado para armazenar os scripts, sempre foi uma dor de cabeça para qualquer desenvolvedor. Para contornar o problema, a solução adotada pela maioria era desenvolver ou dar manutenção no script em um bloco de scripts na própria página e após testá-lo, movê-lo para o arquivo .js. Convenhamos, esta não é a melhor abordagem para uma IDE que é considerada a melhor do mundo, mesmo por muitos dos críticos mais ferrenhos da plataforma .NET.

Felizmente, a equipe de desenvolvimento do Visual Studio ficou sensibilizada com o nosso sofrimento e adicionou suporte ao intellisense nos arquivos .js. Para testar, vamos criar um arquivo .js na solução de testes e mover o código da função escondeControle do exemplo anterior para dentro deste arquivo:

  1. Clique com o botão direito do mouse no Solution Explorer e selecione no menu de contexto, o submenu Add e a seguir a opção Add New Item.
  2. A caixa de diálogos Add New Item será exibida. Selecione o template JScript File e forneça no campo Name o nome TestaJsExterno.js.

  1. Clique no botão Add para adicionar o arquivo à solução.
  2. Antes de mover o código para o arquivo que criamos, comece a digitar a palavra function para verificar que o suporte ao intellisense para javascript está ativo.

  1. Em seguida, mova o código da função escondeControle para este arquivo:

  1. Adicione um novo bloco de scripts a página Default.aspx, informando o arquivo TestaJsExterno.js:

  1. Veja na figura a seguir, que a função escondeControle estará disponível no Intellisense, ao declararmos os código da função Teste:

Conclusão

Confesso que vibrei muito ao ver esse e outros recursos há muito esperados no Visual Studio 2008. Para quem começou a programar em HTML com o Notepad, ter um Intellisense decente no javascript era um antigo sonho de consumo. É bem verdade que ele ainda não é perfeito, mas com certeza daremos um salto de qualidade e de produtividade com o seu uso.

Nos próximos artigos, voltaremos a falar do Javascript no Visual Studio 2008, abordando tópicos como documentação de código no melhor estilo C# (acredite, agora é possível!) e debug de código em Javascript, com direito a uso das janelas de depuração do Visual Studio. Finalmente o Javascript está recebendo o devido respeito!

Abraços e até a próxima!

Cláudio Ralha
MCP – MCAD – MCTS
.NET Senior Consultant
Palestrante .NET Microsoft Brasil
Autor do livro Segredos do Visual Studio .NET
Email: claudioralha@hotmail.com
Blog: http://thespoke.net/blogs/claudioralha
Cláudio Ralha

Cláudio Ralha - http://linhadecodigo.com.br/cs2/blogs/ClaudioRalha/default.aspx
Autor dos livros Dominando o Second Life e Segredos do Visual Studio.NET, profissional certificado Microsoft (MCP,MCAD,MCTS e MCPD) e palestrante Microsoft Brasil e Culminis. Já atuou como colunista do Informática etc do Jornal O GLOBO, editor da Revista Infomania e colaborador de várias revistas e sites. No mercado corporativo já desenvolveu para grandes clientes como Petrobras, Shell, Esso, Rede Globo, Furnas, Brascan, ONS, Unibanco e Bolsa de Valores pelas consultorias Accenture, Stefanini, Arcon, ATT/PS, Informaker, Relacional, Value Team e Softtek.