Procédure pas à pas : JScript IntelliSense

Article
08/21/2008

Mise à jour : novembre 2007

Dans cette procédure pas à pas vous utiliserez IntelliSense pour prendre en charge le développement de script client dans Visual Studio. IntelliSense rend les références relatives aux différents langages faciles d'accès. Lorsque vous écrivez du code, vous n'avez pas besoin de quitter l'éditeur de code pour rechercher des éléments de langage, tels que la syntaxe ou des listes de paramètres. En effet, vous pouvez rester en mode d'édition, rechercher les informations dont vous avez besoin et insérer les éléments de langage directement dans votre code. Visual Studio prend en charge IntelliSense pour Microsoft JScript et d'autres langages ECMAScript tels que JavaScript.

Remarque :
Ce document fait référence spécifiquement à Jscript. Toutefois, IntelliSense dans Visual Studio et Visual Web Developer fonctionne avec tous les langages ECMAScript, JavaScript compris.

Visual Studio prend en charge IntelliSense au niveau des fonctionnalités suivantes :

Éléments DOM (Document Object Model) DHTML.
Objets intrinsèques.
Variables définies par l'utilisateur, fonctions et objets.
Références de fichiers externes.
Commentaires de code XML.
Objets ASP.NET AJAX.

Pour plus d'informations sur le fonctionnement d'IntelliSense dans Visual Studio, consultez Utilisation de la fonctionnalité IntelliSense. Pour plus d'informations sur IntelliSense pour Jscript, consultez Vue d'ensemble de JScript IntelliSense.

Composants requis

Pour effectuer cette procédure pas à pas, vous aurez besoin des composants suivants :

Visual Studio 2008 ou Microsoft Visual Web Developer Express.

Création du site et de la page Web

Pour commencer, vous aller créer un site Web ASP.NET et y inclure la prise en charge des objets, références et script. Si vous avez déjà créé un site Web (par exemple, en suivant les étapes décrites dans Procédure pas à pas : création d'un site Web ASP.NET), vous pouvez utiliser ce site Web et passer à la section suivante de cette procédure pas à pas. Sinon, créez un site et une page Web en suivant ces étapes.

Pour créer l'application Web

Ouvrez Visual Studio 2008 ou Microsoft Visual Web Developer Express.
Dans le menu Fichier, cliquez sur Nouveau site Web.

La boîte de dialogue Nouveau site Web s'affiche.
Sous Modèles Visual Studio installés, cliquez sur Site Web ASP.NET.
Dans la zone de liste Emplacement, sélectionnez Système de fichiers.
Dans la zone située en regard de la liste Emplacement, entrez le nom du dossier dans lequel vous souhaitez conserver les pages de votre site Web.

Par exemple, tapez le nom de dossier suivant : C:\IntellisenseWebSite1.
Dans la liste Langage, cliquez sur Visual Basic ou Visual C#, puis cliquez sur OK.

Le langage de programmation sélectionné servira de valeur par défaut pour la création du code serveur du site Web. Dans cette procédure pas à pas, le choix n'est pas important, parce que vous travaillerez uniquement avec le script client, qui s'exécute dans le navigateur.

Visual Web Developer crée le dossier et une page nommée Default.aspx. Par défaut, lorsqu'une page est créée, Visual Web Developer affiche la page en mode Source, où vous pouvez consulter les éléments HTML de la page.

Ajout de contrôles et de code JScript à la page

Vous allez maintenant ajouter des contrôles et du code JScript à la page Default.aspx.

Pour ajouter des contrôles et du code JScript

Cliquez sur l'onglet Design pour basculer en mode Design.
À partir de l'onglet Extensions AJAX de la Boîte à outils, faites glisser un contrôle UpdatePanel sur la page.
À partir de l'onglet Standard de la Boîte à outils, faites glisser les contrôles suivants jusqu'à la page :
- Contrôle Label pour le titre.
- Contrôle Button pour calculer le volume.
- Contrôle Label contrôle TextBox de légende et d'entrée.
- Contrôle Label et contrôle TextBox de légende et de sortie.
Attribuez à la propriété Text les valeurs suivantes :
- Button1: Calculer
- Label2: Entrée de rayon
- Label3: Sortie de volume
Cliquez sur l'onglet Source pour basculer en mode Source.

Ajoutez la référence de script en surbrillance suivante à l'élément asp:ScriptManager :

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

Dans l'Explorateur de solutions, cliquez avec le bouton droit sur le nom du site Web puis cliquez sur Ajouter un nouvel élément.

La boîte de dialogue Ajouter un nouvel élément s'affiche.
Sous Modèles Visual Studio installés, sélectionnez Fichier JScript puis cliquez sur Ajouter.

Visual Studio crée et ouvre un nouveau fichier nommé JScript.js.

Remarque :

Le nom du fichier .js doit correspondre au nom qui apparaît dans la référence de script dans l'élément asp:ScriptManager.

Remarque :
Le nom du fichier .js doit correspondre au nom qui apparaît dans la référence de script dans l'élément asp:ScriptManager.

Ajoutez le code suivant au fichier 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;
}

Enregistrez et fermez le fichier JScript.js.

Consultation de JScript IntelliSense

JScript IntelliSense est utilisé pour afficher des détails à propos de nombreux types d'objets clients, tels que les éléments DOM (Document Object Model) DHTML (Dynamic HTML), les objets intrinsèques et les objets définis par l'utilisateur. Vous pouvez également utiliser IntelliSense pour afficher des informations à propos des scripts commentés par XML et des objets Microsoft AJAX Library.

Pour consulter JScript IntelliSense

Basculez vers la page Default.aspx ou ouvrez-la, puis basculez en mode Source.
Ajoutez l'élément script à la fin de l'élément form :
```
<script type="text/javascript">

</script>
```
À l'intérieur de l'élément script, tapez le script suivant :
```
var displayTitle = document.
```
Lorsque vous tapez le signe du point (.), l'éditeur affiche les options IntelliSense qui sont adaptés à l'objet du document.
Faites défiler jusqu'à la méthode getElementById et cliquez sur la méthode ou appuyez sur ENTRÉE pour ajouter la méthode getElementById au script.
Complétez la ligne du script en tapant le nom d'un élément à rechercher, afin que la ligne indique ce qui suit :
```
var displayTitle = document.getElementById("Label1");
```
Ajoutez la ligne suivante de script pour afficher le titre dans Label1 :
```
displayTitle.innerHTML = "Calculate Volume";
```
Ajoutez la fonction incomplète suivante à la fin de l'élément script :
```
function calcArea(radiusParam)
{

}
```
Dans la fonction calcArea, tapez le script suivant :
```
  var areaVal = Math.
```
Lorsque vous tapez le signe du point (.), l'éditeur affiche les options IntelliSense qui sont adaptés à l'objet intrinsèque de Math.
Faites défiler jusqu'à la propriété PI et appuyez sur ENTRÉE pour ajouter la propriété PI au script.

Complétez le script afin que la fonction indique ce qui suit :

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

Ajoutez la fonction incomplète suivante à la fin de l'élément script :
```
function displayVolume()
{

}
```
Dans la fonction displayVolume, tapez le script suivant :
```
  radiusVal = $get("TextBox1").value;
  var areaVal = calcArea(
```
Lorsque vous tapez la parenthèse ouvrante, l'éditeur affiche des informations IntelliSense à propos de la valeur du paramètre pour la fonction calcArea que vous avez créée précédemment.
Complétez la ligne de script afin que le script indique ce qui suit :
```
  var areaVal = calcArea(radiusVal);
```
Continuez à apporter des ajouts à la fonction displayVolume en tapant le script suivant :
```
  var volumeVal = calcVolume(
```
Lorsque vous tapez la parenthèse ouvrante, l'éditeur utilise IntelliSense pour afficher les commentaires de code XML basés sur la fonction calcVolume que vous avez créée précédemment.
Complétez la fonction displayVolume afin qu'elle indique ce qui suit :
```
function displayVolume()
{
  radiusVal = $get("TextBox1").value;
  var areaVal = calcArea(radiusVal);
  var volumeVal = calcVolume(areaVal);
  $get("TextBox2").value = areaVal;
}
```
Remarque :

La méthode $get est une fonction ASP.NET AJAX qui fournit un raccourci à la méthode getElementById de la classe Sys.UI.DomElement.
Tapez la ligne de script suivante à la fin de l'élément script :
```
$addHandler(
```
Lorsque vous tapez la parenthèse ouvrante, l'éditeur affiche IntelliSense pour la méthode $addHandler ASP.NET AJAX.
Complétez la ligne de script afin que le script indique ce qui suit :
```
$addHandler($get("Button1"), "click", displayVolume);
```
Assurez-vous que cette ligne se trouve à l'intérieur de la balise </script> mais pas à l'intérieur de la fonction displayVolume.

Remarque :

La méthode $addHandler est une fonction ASP.NET AJAX qui fournit un raccourci à la méthode addHandler de la classe Sys.UI.DomEvent.
Enregistrez la page, puis appuyez sur CTRL+F5 pour l'exécuter.
Entrez une valeur pour le rayon puis cliquez sur le bouton.

Le résultat des calculs que vous avez créés dans JScript est affiché dans la deuxième zone de texte.

Remarque :
La méthode $get est une fonction ASP.NET AJAX qui fournit un raccourci à la méthode getElementById de la classe Sys.UI.DomElement.

Remarque :
La méthode $addHandler est une fonction ASP.NET AJAX qui fournit un raccourci à la méthode addHandler de la classe Sys.UI.DomEvent.

Étapes suivantes

Cette procédure pas à pas vous a montré comment utiliser JScript IntelliSense. Vous pouvez souhaiter en savoir plus sur l'utilisation du script client dans Visual Studio. Pour plus d'informations, consultez Ajout de fonctionnalités AJAX et clientes. Pour plus d'informations sur JScript IntelliSense, consultez Vue d'ensemble de JScript IntelliSense.

Voir aussi

Procédure pas à pas : JScript IntelliSense

Composants requis

Création du site et de la page Web

Pour créer l'application Web

Ajout de contrôles et de code JScript à la page

Pour ajouter des contrôles et du code JScript

Consultation de JScript IntelliSense

Pour consulter JScript IntelliSense

Étapes suivantes

Voir aussi

Tâches

Concepts

Référence

Autres ressources

Ressources supplémentaires