Experimentando o Intellisense para Javascript do Visual Studio 2008
por Cláudio Ralha
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 de scripts
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.
3. Clique no botão Add para
adicionar o arquivo à solução.
