Tutorial: IntelliSense para JScript

Artículo
08/10/2011

En este tutorial se utilizará IntelliSense para que Visual Studio admita el desarrollo del script de cliente. IntelliSense hace que el acceso a las referencias del lenguaje resulte más sencillo. Al codificar, no es necesario que el editor de código busque elementos del lenguaje, como sintaxis o listas de parámetros. En su lugar, puede permanecer en el modo de edición, buscar la información que necesita e insertar los elementos del lenguaje directamente en el código. Visual Studio admite IntelliSense para Microsoft JScript y otros lenguajes de ECMAScript como JavaScript.

Nota

Este documento hace referencia específicamente a Jscript. Sin embargo, IntelliSense en Visual Studio y Visual Web Developer usa todos los lenguajes de ECMAScript, donde se incluye JavaScript.

Visual Studio admite IntelliSense para las características siguientes:

Elementos del Modelo de objetos de documento (DOM) DHTML .
Objetos intrínsecos.
Variables, funciones y objetos definidos por el usuario.
Referencias a archivos externos.
Comentarios de código XML.
Objetos ASP.NET AJAX.

Para obtener más información sobre la funcionalidad de IntelliSense en Visual Studio, vea Utilizar IntelliSense. Para obtener más información sobre IntelliSence para JScript, vea Información general de IntelliSense para JScript.

Requisitos previos

Para poder completar este tutorial, necesitará los componentes siguientes:

Visual Studio 2010 o Microsoft Visual Web Developer Express.

Crear el sitio y la página Web

Para comenzar, creará un sitio web de ASP.NET e incluirá objetos , referencias y script compatibles. Si ya ha creado un sitio web (por ejemplo, mediante los pasos descritos en Tutorial: Crear un nuevo sitio web ASP.NET), puede utilizar ese sitio web y pasar a la sección siguiente de este tutorial. De lo contrario, cree un sitio y una página web nuevos siguiendo estos pasos.

Para crear la aplicación Web

Abra Visual Studio 2010 o Microsoft Visual Web Developer Express.
En el menú Archivo, haga clic en Nuevo sitio Web.

Se muestra el cuadro de diálogo Nuevo sitio Web.
En Plantillas instaladas de Visual Studio, haga clic en Sitio web ASP.NET.
En la lista Ubicación, seleccione Sistema de archivos.
En el cuadro junto a la lista Ubicación, escriba el nombre de la carpeta en la que desee guardar las páginas de su sitio web.

Por ejemplo, escriba el siguiente nombre de carpeta: C:\IntellisenseSitioweb1
En la lista Lenguaje, haga clic en Visual Basic o **Visual C#**y, a continuación, haga clic en Aceptar.

El lenguaje de programación que ha seleccionado será el valor predeterminado para la creación de código basado en servidor para el sitio web. En este tutorial, la opción no es importante, porque sólo estará trabajando con script de cliente, el cual se ejecuta en el explorador.

Visual Web Developer crea la carpeta y una página nueva denominada Default.aspx. De forma predeterminada, cuando se crea una nueva página, Visual Web Developer muestra la página en la vista Código fuente, donde puede ver los elementos HTML de la página.

Agregar controles y código JScript a la página

Ahora podrá agregar controles y código JScript a la página Default.aspx.

Para agregar controles y código JScript

Haga clic en la ficha Diseño para cambiar a la vista Diseño.
En la ficha Extensiones AJAX en Cuadro de herramientas, arrastre un control UpdatePanel a la página.
Desde la ficha Estándar en el Cuadro de herramientas, arrastre los controles siguientes a la página:
- Un control Label para el título.
- Un control Button para calcular el volumen.
- Un control Label y un control TextBox para un título y la entrada.
- Un control Label y un control TextBox para un título y la salida.
Establezca la propiedad Text de los controles para los valores siguientes:
- Button1: Calcular
- Label2: Entrada de radio
- Label3: Salida del volumen
Haga clic en la ficha Código fuente para cambiar a la vista Código fuente.

Agregue la siguiente referencia de script resaltada al elemento asp:ScriptManager:

<asp:ScriptManager ID="ScriptManager1" runat="server">
  <Scripts>
    <asp:ScriptReference Path="JScript.js" />
  </Scripts>
</asp:ScriptManager>

En el Explorador de soluciones, haga clic con el botón secundario del mouse en el nombre del sitio web y, a continuación, haga clic en Agregar nuevo elemento.

Se abrirá el cuadro de diálogo Agregar nuevo elemento.
En Plantillas instaladas de Visual Studio, seleccione Archivo JScript y, a continuación, haga clic en Agregar.

Visual Studio crea y abre un archivo nuevo que se denomina JScript.js.

Nota

El nombre del archivo .js debe coincidir con el nombre que aparece en la referencia al script en el elemento asp:ScriptManager.

Agregue el código siguiente al archivo 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;
}

Guarde y cierre el archivo JScript.js.

Ver IntelliSense para JScript

IntelliSense para JScript se utiliza para mostrar los detalles sobre muchos tipos de objetos de cliente, como por ejemplo, elementos del Modelo de objetos de documento (DOM) HTML dinámicos (DHTML), objetos intrínsecos y objetos definidos por el usuario. También puede usar IntelliSense para mostrar información sobre el script marcado como comentario XML y sobre los objetos de Microsoft Ajax Library.

Para ver IntelliSense para JScript

Cambie a la página Default.aspx, o ábrala, y, a continuación, cambie a la vista Código fuente.
Agregue el siguiente elemento de script al final del elemento de form:
```
<script type="text/javascript">

</script>
```
En el elemento de script, escriba el siguiente script:
```
var displayTitle = document.
```
Si escribe un punto (.), el editor muestra las opciones de IntelliSense relevantes para el objeto de document.
Desplácese al método getElementById y haga clic en el método o presione ENTRAR para agregar el método getElementById al script.
Complete la línea de script escribiendo el nombre de un elemento que desea buscar, de forma que la línea aparezca como sigue:
```
var displayTitle = document.getElementById("Label1");
```
Agregue la línea de script siguiente para que aparezca el título en Label1:
```
displayTitle.innerHTML = "Calculate Volume";
```
Agregue la siguiente función incompleta al final del elemento de script.
```
function calcArea(radiusParam)
{

}
```
En la función calcArea, escriba el script siguiente:
```
  var areaVal = Math.
```
Si escribe un punto (.), el editor muestra las opciones de IntelliSense relevantes para el objeto intrínseco Math.
Desplácese a la propiedad PI y presione ENTRAR para agregar la propiedad PI al script.

Complete el script de forma que la función aparezca como sigue:

function calcArea(radiusParam)
{
  var areaVal = Math.PI * radiusParam * radiusParam;
  return areaVal;
}

Agregue la siguiente función incompleta al final del elemento de script.
```
function displayVolume()
{

}
```
En la función displayVolume, escriba el script siguiente:
```
  radiusVal = $get("TextBox1").value;
  var areaVal = calcArea(
```
Al escribir el paréntesis de apertura, el editor muestra información de IntelliSense sobre el valor del parámetro para la función calcArea que creó anteriormente.
Complete la línea de script de forma que el script aparezca como sigue:
```
  var areaVal = calcArea(radiusVal);
```
Sigua agregando elementos a la función displayVolume escribiendo el script siguiente:
```
  var volumeVal = calcVolume(
```
Al escribir el paréntesis de apertura, el editor utiliza IntelliSense para mostrar comentarios de código XML basados en la función calcVolume que creó anteriormente.
Complete la función displayVolume para que aparezca como sigue:
```
function displayVolume()
{
  radiusVal = $get("TextBox1").value;
  var areaVal = calcArea(radiusVal);
  var volumeVal = calcVolume(areaVal);
  $get("TextBox2").value = areaVal;
}
```
Nota

El método $ get es una función ASP.NET AJAX que proporciona un acceso directo al método getElementById de la clase Sys.UI.DomElement.
Escriba la siguiente línea de script al final del elemento de script:
```
$addHandler(
```
Al escribir el paréntesis de apertura, el editor muestra IntelliSense para el método de ASP.NET AJAX $ addHandler.
Complete la línea de script de forma que el script aparezca como sigue:
```
$addHandler($get("Button1"), "click", displayVolume);
```
Asegúrese de que esta línea está dentro de la etiqueta </script> pero no dentro de la función displayVolume.

Nota

El método $addHandler es una función ASP.NET AJAX que proporciona un acceso directo al método addHandler de la clase Sys.UI.DomEvent.
Guarde la página y, a continuación, presione CTRL+F5 para ejecutarla.
Especifique un valor para el radio y, a continuación, haga clic en el botón.

El resultado de los cálculos que ha creado en JScript se muestra en el segundo cuadro de texto.

Pasos siguientes

Este tutorial ha ilustrado cómo trabajar con IntelliSense para JScript. Podrá obtener más información sobre cómo trabajar con el script de cliente en Visual Studio. Para obtener información detallada, vea ASP.NET AJAX Roadmap. Para obtener más información acerca de IntelliSense para JScript, vea Información general de IntelliSense para JScript.

Vea también

Compartir a través de

Tutorial: IntelliSense para JScript

Requisitos previos

Crear el sitio y la página Web

Para crear la aplicación Web

Agregar controles y código JScript a la página

Para agregar controles y código JScript

Ver IntelliSense para JScript

Para ver IntelliSense para JScript

Pasos siguientes

Vea también

Tareas

Referencia

Conceptos

Otros recursos

Recursos adicionales