Partilhar via


Demonstra Passo a passo: IntelliSense de JScript

Esta explicação passo a passo, você usará o IntelliSense para suporte ao desenvolvimento do script de cliente em Visual Studio. IntelliSense faz com que a referência de linguagem fácil acesso. Ao codificar, não é necessário deixar o código do editor para procurar elementos de linguagem, como listas de sintaxe ou parâmetro. Em vez disso, você pode permanecer no modo de edição, localizar as informações que você precisa e insere elementos de linguagem diretamente em seu código. Visual Studio oferece suporte a IntelliSense para JScript da Microsoft e outros idiomas ECMAScript como JavaScript.

ObservaçãoObservação

Este documento refere-se especificamente para o Jscript. No entanto, IntelliSense em Visual Studio e Visual Web Developer funciona com todos os idiomas do ECMAScript, que inclui o JavaScript.

Visual Studiosuporta IntelliSense para os seguintes recursos:

  • Elementos DHTML documento objeto DOM (modelo).

  • Objetos intrínsecos.

  • Variáveis definidas pelo usuário, funções e objetos.

  • Referências de arquivo externo.

  • Comentários de código XML.

  • ASP.Objetos de NET AJAX.

Para obter mais informações sobre a funcionalidade de IntelliSense em Visual Studio, consulte Usando o IntelliSense. Para obter informações sobre o IntelliSense para JScript, consulte Visão geral de IntelliSense de JScript.

Pré-requisitos

Para concluir este passo a passo, você precisa os seguintes componentes:

  • Visual Studio 2010 or Microsoft Visual Web Developer Express.

Creating the Web Site and Page

Para começar, você criará uma página ASP.NET da Web e incluir o suporte a objetos, referências e script. Se você já tiver criado um site da Web (por exemplo, seguindo as etapas na Demonstra Passo a passo: Criando um Nova Site ASP.NET), você pode usar esse site e ir para a próxima seção desta explicação passo a passo. Caso contrário, crie um novo site e página usando as seguintes etapas.

Para criar o aplicativo da Web

  1. Open Visual Studio 2010 or Microsoft Visual Web Developer Express.

  2. Sobre o arquivo menu, clique em Novo Site da Web.

    The New Web Site dialog box is displayed.

  3. Em Visual Studio installed templates, clique em ASP.NET Web Site da.

  4. Do local lista, selecione Sistema de arquivos.

  5. Na caixa ao lado do local lista, digite o nome da pasta onde você deseja manter as páginas do site da Web.

    Por exemplo, digite o seguinte nome de pasta: C:\IntellisenseWebSite1

  6. Do idioma lista, clique em Visual Basic ou **Visual C#**e em seguida, clique em OK.

    A linguagem de programação que você selecionar será o padrão para criar o código baseado em servidor para o site. Esta explicação passo a passo, a opção não é importante, porque você estará trabalhando com o script de cliente que executa no navegador.

    Visual Web Developer creates the folder and a new page named Default.aspx. Por padrão, quando uma nova página é criada, Visual Web Developer exibe a página no modo Source, onde você pode ver elementos HTML. da página

Adicionando controles e código de JScript para a página

Agora você irá adicionar controles e código de JScript para a página Default. aspx.

Para adicionar controles e código de JScript

  1. Click the Design tab to switch to Design view.

  2. Do Extensões AJAX guia de Toolbox, arraste um UpdatePanel controle na página.

  3. Do padrão guia de Toolbox, arraste os seguintes controles para a página:

    • A Label o controle para o título.

    • A Button o controle para calcular o volume.

    • A Label controle e um TextBox o controle para uma legenda e entrada.

    • A Label controle e um TextBox o controle para uma legenda e de saída.

  4. Definir o Text propriedade dos controles com os seguintes valores:

    • Button1: Calcular

    • Label2: RADIUS de entrada

    • Label3: Saída de volume

  5. Clique o fonte tab para alternar para modo de exibição Source.

  6. Adicionar a referência de script realçada a seguir para o asp:ScriptManager elemento:

    <asp:ScriptManager ID="ScriptManager1" runat="server">
      <Scripts>
        <asp:ScriptReference Path="JScript.js" />
      </Scripts>
    </asp:ScriptManager>
    
  7. In Solution Explorer, right-click the Web site name and then click Add New Item.

    The Add New Item dialog box is displayed.

  8. Em Visual Studio installed templates, selecione O arquivo de JScript e, em seguida, clique em Add.

    Visual Studiocria e abre um novo arquivo chamado JScript.js.

    ObservaçãoObservação

    O nome do arquivo. js deve corresponder ao nome que aparece na referência de script no asp:ScriptManager elemento.

  9. Adicione o seguinte código para o arquivo JScript.js:

    function calcVolume(areaValue)
    {
      /// <summary>Determines the volume of a cicle based on an area parameter.</summary>
      /// <param name="area" type="Number">The area of the circle.</param>
      /// <returns type="Number">Returns a number that represents the area.</returns>
      var volumeVal;
      volumeVal = Math.pow(areaValue,3);
      return volumeVal;
    }
    
  10. Salve e feche o arquivo JScript.js.

Exibindo IntelliSense de JScript

IntelliSense de JScript é usado para exibir detalhes sobre muitos tipos de objetos de cliente, como, por exemplo, os elementos de HTML dinâmico (DHTML) documento objeto DOM (modelo), objetos intrínsecos e objetos definidos pelo usuário. Você também pode usar para exibir informações sobre script comentada de XML e aproximadamente IntelliSense Microsoft Ajax Library objetos.

Para exibir a IntelliSense de JScript

  1. Alterne para ou abra a página Default. aspx e alterne para modo Source.

  2. Adicione o seguinte script o elemento no final do form elemento:

    <script type="text/javascript">
    
    </script>
    
  3. Dentro do script elemento, digite o seguinte script:

    var displayTitle = document.
    

    Quando você digita o ponto (.), o editor exibe as opções de IntelliSense que são apropriadas para o document objeto.

  4. Role até o getElementById método e clique em que o método ou pressione inserir para adicionar o getElementById método do script.

  5. Conclua a linha do script digitando o nome de um elemento para localizar, para que a linha seja exibida da seguinte maneira:

    var displayTitle = document.getElementById("Label1");
    
  6. Adicione a seguinte linha do script para exibir o título no Label1:

    displayTitle.innerHTML = "Calculate Volume";
    
  7. Adicione a seguinte função incompleta no final da script elemento:

    function calcArea(radiusParam)
    {
    
    }
    
  8. No calcArea função, digite o seguinte script:

      var areaVal = Math.
    

    Quando você digita o ponto (.), o editor exibe as opções de IntelliSense que são apropriadas para o Math objeto intrínseco.

  9. Role até o PI propriedade e pressione inserir para adicionar o PI propriedade para o script.

  10. Execute o script para que a função aparece como segue:

    function calcArea(radiusParam)
    {
      var areaVal = Math.PI * radiusParam * radiusParam;
      return areaVal;
    }
    
  11. Adicione a seguinte função incompleta no final da script elemento:

    function displayVolume()
    {
    
    }
    
  12. No displayVolume função, digite o seguinte script:

      radiusVal = $get("TextBox1").value;
      var areaVal = calcArea(
    

    Quando você digita o parêntese de abertura, o editor exibe informações de IntelliSense sobre o valor de parâmetro para o calcArea função que você criou anteriormente.

  13. Conclua a linha do script para que o script apareça da seguinte maneira:

      var areaVal = calcArea(radiusVal);
    
  14. Continuar a adicionar o displayVolume função digitando o seguinte script:

      var volumeVal = calcVolume(
    

    Quando você digita o parêntese de abertura, o editor usa IntelliSense para exibir os comentários de código XML que sejam baseiam na calcVolume função que você criou anteriormente.

  15. Conclua o displayVolume função para que a função aparecer da seguinte maneira:

    function displayVolume()
    {
      radiusVal = $get("TextBox1").value;
      var areaVal = calcArea(radiusVal);
      var volumeVal = calcVolume(areaVal);
      $get("TextBox2").value = areaVal;
    }
    
    ObservaçãoObservação

    O $get método é um aplicativo ASP.Função de NET AJAX fornece um atalho para o getElementById método de Sys.UI.DomElement classe.

  16. Digite a seguinte linha do script no final de script elemento:

    $addHandler(
    

    Quando você digita o parêntese de abertura, o editor exibe IntelliSense para o ASP.NET AJAX $addHandler método.

  17. Conclua a linha do script para que o script apareça da seguinte maneira:

    $addHandler($get("Button1"), "click", displayVolume);
    

    Certifique-se de que esta linha está dentro do </script> marca, mas não dentro a displayVolume função.

    ObservaçãoObservação

    O $addHandler método é um aplicativo ASP.Função de NET AJAX fornece um atalho para o addHandler método de Sys.UI.DomEvent classe.

  18. Salve a página e, em seguida, pressione CTRL + F5 para executá-lo.

  19. Digite um valor para o raio e, em seguida, clique no botão.

    O resultado dos cálculos que você criou na JScript é exibido na segunda caixa de texto.

Próximas etapas

Esta explicação passo a passo ilustrou como trabalhar com IntelliSense de JScript. Talvez você queira saber mais sobre como trabalhar com scripts de cliente em Visual Studio. For details, see ASP.NET AJAX Roadmap. Para obter mais informações sobre o IntelliSense de JScript, consulte Visão geral de IntelliSense de JScript.

Consulte também

Tarefas

Atribuindo Referências a Scripts Dinamicamente

Referência

Listar Membros

Conceitos

Visão geral de IntelliSense de JScript

Outros recursos

Usando o IntelliSense

Sobre o modelo de objeto DHTML

Objetos de JScript

Atributo SRC | Propriedade src