Procedura dettagliata: IntelliSense per JScript

Articolo
08/11/2011

In questa procedura dettagliata si utilizzerà IntelliSense supportare lo sviluppo script client in Visual Studio. IntelliSense semplifica l’accesso ai riferimenti del linguaggio. Durante la codifica non è necessario chiudere l’editor del codice per cercare elementi del linguaggio, elenchi di sintassi o parametri. È possibile restare in modalità di modifica, cercare le informazioni necessarie e inserire direttamente gli elementi del linguaggio nel codice. Visual Studio supporta IntelliSense per Microsoft JScript e gli altri linguaggi di ECMAScript ad esempio JavaScript.

Nota

Questo documento si riferisce in particolare a JScript. Tuttavia, IntelliSense in Visual Studio e Visual Web Developer funziona con tutti i linguaggi di ECMAScript che includono JavaScript.

Visual Studio supporta IntelliSense per le seguenti funzionalità:

Elementi DOM (Document Object Model) DHTML.
Oggetti intrinseci.
Variabili definite dall'utente, funzioni e oggetti.
Riferimenti a file esterni.
Commenti di codice XML.
Oggetti ASP.NET per AJAX.

Per ulteriori informazioni sulle funzionalità di IntelliSense in Visual Studio, vedere Utilizzo di IntelliSense. Per informazioni su IntelliSense per JScript, vedere Cenni preliminari su IntelliSense per JScript.

Prerequisiti

Per completare questa procedura dettagliata, è necessario disporre dei seguenti componenti:

Visual Studio 2010 o Microsoft Visual Web Developer Express.

Creazione del sito e della pagina Web

Per iniziare si creerà un sito Web ASP.NET e si includeranno gli oggetti, i riferimenti e gli script di supporto. Se un sito Web è già stato creato in Visual Web Developer (ad esempio seguendo le procedure di Procedura dettagliata: creazione di un nuovo sito Web ASP.NET), è possibile utilizzarlo e passare alla sezione successiva. In caso contrario, creare un sito e una pagina Web nuovi attenendosi alla procedura riportata di seguito.

Per creare l'applicazione Web

Aprire Visual Studio 2010 o Microsoft Visual Web Developer Express.
Scegliere Nuovo sito Web dal menu File.

Verrà visualizzata la finestra di dialogo Nuovo sito Web.
In Modelli Visual Studio installati scegliere Sito Web ASP.NET.
Selezionare File system nell’elenco Percorso.
Nella casella accanto all’elenco Percorso digitare il nome della cartella in cui salvare le pagine del sito Web.

Ad esempio, digitare il seguente nome della cartella C:\IntelliSenseWebSite1.
Nell'elenco Linguaggio selezionare Visual Basic o Visual C#, quindi scegliere OK.

Il linguaggio di programmazione selezionato verrà utilizzato come predefinito per creare codice basato su server per il sito Web. In questa procedura dettagliata, l’opzione selezionata non è importante, perché si utilizzerà solo lo script client in esecuzione nel browser.

In Visual Web Developer viene creata la cartella e una nuova pagina denominata Default.aspx. Per impostazione predefinita, dopo aver creato una pagina nuova, in Visual Web Developer questa viene visualizzata nella visualizzazione Origine con i relativi elementi HTML.

Aggiunta di controlli e codice JScript alla pagina

Ora si aggiungeranno controlli e codice JScript alla pagina Default.aspx.

Per aggiungere i controlli e il codice JScript

Fare clic sulla scheda Progettazione per passare alla visualizzazione Progettazione.
Dalla scheda Estensioni AJAX della Casella degli strumenti trascinare un controllo UpdatePanel nella pagina.
Dalla scheda Standard della Casella degli strumenti trascinare i seguenti controlli nella pagina:
- Un controllo Label per il titolo.
- Un controllo Button per calcolare il volume.
- Un controllo Label e un controllo TextBox per una didascalia e l’immissione.
- Un controllo Label e un controllo TextBox per una didascalia e l’output.
Impostare la proprietà Text dei controlli sui seguenti valori:
- Button1: calcolo
- Label2: immissione raggio
- Label3: output volume
Fare clic sulla scheda Origine per passare alla visualizzazione Origine.

Aggiungere il seguente riferimento allo script evidenziato all’elemento asp:ScriptManager:

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

In Esplora soluzioni fare clic con il pulsante destro del mouse sul nome del sito Web, quindi scegliere Aggiungi nuovo elemento.

Verrà visualizzata la finestra di dialogo Aggiungi nuovo elemento.
In Modelli Visual Studio installati selezionare File JScript e scegliere Aggiungi.

In Visual Studio viene creato e aperto un file nuovo denominato JScript.js.

Nota

Il nome del file JS deve corrispondere a quello visualizzato nel riferimento allo script nell’elemento asp:ScriptManager.

Aggiungere il seguente codice al file 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;
}

Salvare e chiudere il file JScript.js.

Visualizzazione di JScript IntelliSense

JScript Intellisense consente di visualizzare i dettagli sul molti tipi di oggetti client, ad esempio elementi DOM (Document Object Model) Dynamic HTML (DHTML), oggetti intrinseci e oggetti definiti dall’utente. È anche possibile utilizzare IntelliSense per visualizzare informazioni su script commentati in XML e sugli oggetti libreria Microsoft Ajax.

Per visualizzare IntelliSense JScript

Passare a o aprire la pagina Default.aspx e passare alla visualizzazione Origine.
Aggiungere il seguente elemento script alla fine dell’elemento form:
```
<script type="text/javascript">

</script>
```
Nell’elemento script digitare il seguente script:
```
var displayTitle = document.
```
Quando si digita il punto (.), nell'editor vengono visualizzate le opzioni IntelliSense appropriate all'oggetto document.
Individuare il metodo getElementById e fare clic o premere INVIO per aggiungerlo allo script.
Completare la riga di script digitando il nome di un elemento da cercare, in modo che la riga venga visualizzata nel modo seguente:
```
var displayTitle = document.getElementById("Label1");
```
Aggiungere la seguente riga di script per visualizzare il titolo in Label1:
```
displayTitle.innerHTML = "Calculate Volume";
```
Aggiungere la seguente funzione incompleta alla fine dell’elemento script:
```
function calcArea(radiusParam)
{

}
```
Nella funzione calcArea digitare il seguente script:
```
  var areaVal = Math.
```
Quando si digita il punto (.), nell'editor vengono visualizzate le opzioni IntelliSense appropriate all'oggetto intrinseco Math.
Individuare la proprietà PI e premere INVIO per aggiungerla allo script.

Completare lo script in modo che la funzione venga visualizzata come segue:

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

Aggiungere la seguente funzione incompleta alla fine dell’elemento script:
```
function displayVolume()
{

}
```
Nella funzione displayVolume digitare il seguente script:
```
  radiusVal = $get("TextBox1").value;
  var areaVal = calcArea(
```
Quando si digita la parentesi di apertura, nell'editor vengono visualizzate le informazioni di IntelliSense sul valore del parametro per la funzione calcArea creata in precedenza.
Completare la riga di script in modo che lo script venga visualizzato come segue:
```
  var areaVal = calcArea(radiusVal);
```
Continuare con l’aggiunta alla funzione displayVolume digitando lo script seguente:
```
  var volumeVal = calcVolume(
```
Quando si digita la parentesi di apertura, l’editor utilizza IntelliSense per visualizzare i commenti di codice XML basati sulla funzione calcVolume creata in precedenza.
Completare la funzione displayVolume in modo che venga visualizzata come segue:
```
function displayVolume()
{
  radiusVal = $get("TextBox1").value;
  var areaVal = calcArea(radiusVal);
  var volumeVal = calcVolume(areaVal);
  $get("TextBox2").value = areaVal;
}
```
Nota

Il metodo $get è una funzione ASP.NET per AJAX che fornisce un collegamento al metodo getElementById della classe Sys.UI.DomElement.
Digitare la seguente riga di script alle fine dell’elemento script:
```
$addHandler(
```
Quando si digita la parentesi di apertura, nell'editor viene visualizzato IntelliSense per il metodo $addHandler di ASP.NET per AJAX.
Completare la riga di script in modo che lo script venga visualizzato come segue:
```
$addHandler($get("Button1"), "click", displayVolume);
```
Verificare che questa riga sia nel tag </script> ma non nella funzione displayVolume.

Nota

Il metodo $addhandler è una funzione ASP.NET per AJAX che fornisce un collegamento al metodo addHandler della classe Sys.UI.DomEvent.
Salvare la pagina e premere CTRL+F5 per eseguirla.
Digitare un valore per il raggio e fare clic sul pulsante.

Il risultato dei calcoli creati in JScript viene visualizzato nella seconda casella di testo.

Passaggi successivi

In questa procedura dettagliata è stato illustrato come utilizzare IntelliSense JScript. Ulteriori informazioni sull’utilizzo dello script client sono disponibili in Visual Studio. Per informazioni dettagliate, vedere ASP.NET AJAX Roadmap. Per ulteriori informazioni su IntelliSense JScript, vedere Cenni preliminari su IntelliSense per JScript.

Vedere anche

Condividi tramite

Procedura dettagliata: IntelliSense per JScript

Prerequisiti

Creazione del sito e della pagina Web

Per creare l'applicazione Web

Aggiunta di controlli e codice JScript alla pagina

Per aggiungere i controlli e il codice JScript

Visualizzazione di JScript IntelliSense

Per visualizzare IntelliSense JScript

Passaggi successivi

Vedere anche

Attività

Riferimenti

Concetti

Altre risorse

Risorse aggiuntive