Freigeben über

Exemplarische Vorgehensweise: JScript-IntelliSense

  • Artikel

Aktualisiert: November 2007

In dieser exemplarischen Vorgehensweise verwenden Sie IntelliSense, um die Entwicklung von Clientskripts in Visual Studio zu unterstützen. IntelliSense vereinfacht den Zugriff auf Sprachreferenzen. Sie müssen den Code-Editor beim Schreiben von Code nicht verlassen, um nach Sprachelementen, wie Syntax- oder Parameterlisten, zu suchen. Sie können stattdessen die benötigten Informationen suchen und Sprachelemente direkt in den Code einfügen, während Sie sich weiterhin im Bearbeitungsmodus befinden. Visual Studio unterstützt IntelliSense für Microsoft JScript und andere ECMAScript-Sprachen wie JavaScript.

Hinweis:

Dieses Dokument bezieht sich insbesondere auf JScript. IntelliSense in Visual Studio und Visual Web Developer unterstützt jedoch alle ECMAScript-Sprachen, einschließlich JavaScript.

Visual Studio unterstützt IntelliSense für die folgenden Features:

  • Elemente des DHTML-Dokumentobjektmodells (DOM)

  • Systeminterne Objekte

  • Benutzerdefinierte Variablen, Funktionen und Objekte

  • Externe Dateiverweise

  • XML-Codekommentare

  • ASP.NET-AJAX-Objekte

Weitere Informationen über die IntelliSense-Funktionalität in Visual Studio finden Sie unter Verwenden von IntelliSense. Informationen über IntelliSense für JScript finden Sie unter Übersicht über IntelliSense für JScript.

Vorbereitungsmaßnahmen

Für die Durchführung dieser exemplarischen Vorgehensweise benötigen Sie folgende Komponenten:

  • Visual Studio 2008 oder Microsoft Visual Web Developer Express Edition.

Erstellen der Website und der Webseite

Zu Beginn erstellen Sie eine ASP.NET-Website und fügen unterstützende Objekte, Verweise und Skriptcode ein. Wenn Sie bereits eine Website erstellt haben (z. B. indem Sie die Schritte in Exemplarische Vorgehensweise: Erstellen einer neuen ASP.NET-Website befolgt haben), können Sie diese Website verwenden und zum nächsten Abschnitt dieser exemplarischen Vorgehensweise übergehen. Erstellen Sie andernfalls mit den folgenden Schritten eine neue Website und eine neue Webseite.

So erstellen Sie die Webanwendung

  1. Öffnen Sie Visual Studio 2008 oder Microsoft Visual Web Developer Express Edition.

  2. Klicken Sie im Menü Datei auf Neue Website.

    Das Dialogfeld Neue Website wird angezeigt.

  3. Klicken Sie unter Von Visual Studio installierte Vorlagen auf ASP.NET-Website.

  4. Wählen Sie in der Liste Speicherort den Eintrag Dateisystem aus.

  5. Geben Sie im Feld neben der Liste Speicherort den Namen des Ordners ein, in dem die Seiten der Website gespeichert werden sollen.

    Geben Sie z. B. folgenden Ordnernamen ein: C:\IntellisenseWebSite1

  6. Klicken Sie im Listenfeld Sprache auf Visual Basic oder Visual C#, und klicken Sie dann auf OK.

    Die Programmiersprache, die Sie auswählen, wird beim Erstellen des serverbasierten Codes für die Website als Standardeinstellung verwendet. In dieser exemplarischen Vorgehensweise ist die Auswahl nicht von Bedeutung, da Sie lediglich mit Clientskriptcode arbeiten, der im Browser ausgeführt wird.

    Visual Web Developer erstellt den Ordner und eine neue Seite mit dem Namen Default.aspx. Wenn Sie eine neue Seite erstellen, wird sie von Visual Web Developer standardmäßig in der Quellansicht angezeigt, in der die HTML-Elemente der Seite sichtbar sind.

Hinzufügen von Steuerelementen und JScript-Code zur Seite

Jetzt fügen Sie der Seite Default.aspx Steuerelemente und JScript-Code hinzu.

So fügen Sie Steuerelemente und JScript-Code hinzu

  1. Klicken Sie auf die Registerkarte Entwurf, um zur Entwurfsansicht zu wechseln.

  2. Ziehen Sie von der Registerkarte AJAX-Erweiterungen in der Toolbox ein UpdatePanel-Steuerelement auf die Seite.

  3. Ziehen Sie aus der Toolbox von der Registerkarte Standard die folgenden Steuerelemente auf die Seite.

    • Ein Label-Steuerelement für den Titel.

    • Ein Button-Steuerelement, um den Umfang zu berechnen.

    • Ein Label-Steuerelement und ein TextBox-Steuerelement für eine Bezeichnung bzw. für Eingaben.

    • Ein Label-Steuerelement und ein TextBox-Steuerelement für eine Bezeichnung bzw. für Ausgaben.

  4. Legen Sie die Text-Eigenschaft der Steuerelemente auf die folgenden Werte fest:

    • Button1: Calculate

    • Label2: Radius Input

    • Label3: Volume Output

  5. Klicken Sie auf die Registerkarte Quelle, um zur Quellansicht zu wechseln.

  6. Fügen Sie dem asp:ScriptManager-Element den folgenden markierten Skriptverweis hinzu:

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

  7. Klicken Sie im Projektmappen-Explorer mit der rechten Maustaste auf den Namen der Website, und klicken Sie dann auf Neues Element hinzufügen.

    Das Dialogfeld Neues Element hinzufügen wird angezeigt.

  8. Wählen Sie unter Von Visual Studio installierte Vorlagen die Option JScript-Datei aus, und klicken Sie dann auf Hinzufügen.

    Visual Studio erstellt und öffnet eine neue Datei mit dem Namen JScript.js.

    Hinweis:

    Der Name der JS-Datei muss mit dem Namen des im asp:ScriptManager-Element angezeigten Skriptverweises übereinstimmen.

  9. Fügen Sie der Datei Jscript.js folgenden Code hinzu:

    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. Speichern und schließen Sie die Datei JScript.js.

Anzeigen von JScript-IntelliSense

JScript-IntelliSense wird verwendet, um detaillierte Informationen zu vielen Arten von Clientobjekten anzuzeigen, beispielsweise zu Elementen des Dynamic HTML (DHTML)-Dokumentobjektmodells, systeminternen Objekten und benutzerdefinierten Objekten. Sie können IntelliSense auch verwenden, um Informationen über Skripte mit XML-Kommentaren und Microsoft AJAX Library-Objekte anzuzeigen.

So zeigen Sie JScript-IntelliSense an

  1. Wechseln Sie zur Seite Default.aspx, oder öffnen Sie diese, und wechseln Sie in die Quellansicht.

  2. Fügen Sie am Ende des form-Elements folgendes script-Element hinzu:

    <script type="text/javascript">

</script>

  3. Geben Sie im script-Element das folgende Skript ein:

    var displayTitle = document.

    Wenn Sie den Punkt (.) eingeben, zeigt der Editor für das document-Objekt geeignete IntelliSense-Optionen an.

  4. Führen Sie einen Bildlauf zur getElementById-Methode aus, und klicken Sie auf die Methode, oder drücken Sie die EINGABETASTE, um die getElementById-Methode in das Skript einzufügen.

  5. Vervollständigen Sie die Zeile des Skripts, indem Sie den Namen eines zu suchenden Elements eingeben, sodass die Zeile wie folgt angezeigt wird:

    var displayTitle = document.getElementById("Label1");

  6. Fügen Sie die folgende Skriptzeile hinzu, um den Titel in Label1 anzuzeigen:

    displayTitle.innerHTML = "Calculate Volume";

  7. Fügen Sie am Ende des script-Elements die folgende unvollständige Funktion hinzu:

    function calcArea(radiusParam)
{

}

  8. Geben Sie in der calcArea-Funktion folgenden Skriptcode ein:

      var areaVal = Math.

    Wenn Sie den Punkt (.) eingeben, zeigt der Editor für das systeminterne Math-Objekt geeignete IntelliSense-Optionen an.

  9. Führen Sie einen Bildlauf zur PI-Eigenschaft aus, und drücken Sie die EINGABETASTE, um die PI-Eigenschaft in das Skript einzufügen.

  10. Vervollständigen Sie das Skript, damit die Funktion wie folgt angezeigt wird:

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

  11. Fügen Sie am Ende des script-Elements die folgende unvollständige Funktion hinzu:

    function displayVolume()
{

}

  12. Geben Sie in der displayVolume-Funktion folgenden Skriptcode ein:

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

    Wenn Sie die öffnende Klammer eingeben, zeigt der Editor IntelliSense-Informationen zum Parameterwert für die zuvor erstellte calcArea-Funktion an.

  13. Vervollständigen Sie die Skriptzeile, damit das Skript wie folgt angezeigt wird:

      var areaVal = calcArea(radiusVal);

  14. Vervollständigen Sie die displayVolume-Funktion, indem Sie das folgende Skript eingeben:

      var volumeVal = calcVolume(

    Wenn Sie die öffnende Klammer eingeben, verwendet der Editor IntelliSense, um XML-Codekommentare anzuzeigen, die auf der zuvor erstellten calcVolume-Funktion basieren.

  15. Vervollständigen Sie die displayVolume-Funktion, damit sie wie folgt angezeigt wird:

    function displayVolume()
{
  radiusVal = $get("TextBox1").value;
  var areaVal = calcArea(radiusVal);
  var volumeVal = calcVolume(areaVal);
  $get("TextBox2").value = areaVal;
}
    Hinweis:

    Die $get-Methode ist eine ASP.NET-AJAX-Funktion, die eine Verknüpfung zur getElementById-Methode der Sys.UI.DomElement-Klasse bereitstellt.

  16. Geben Sie die folgende Skriptzeile am Ende des script-Elements ein:

    $addHandler(

    Wenn Sie die öffnende Klammer eingeben, zeigt der Editor IntelliSense für die ASP.NET-AJAX-$ addHandler-Methode an.

  17. Vervollständigen Sie die Skriptzeile, damit das Skript wie folgt angezeigt wird:

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

    Stellen Sie sicher, dass sich diese Zeile innerhalb des </script>-Tags befindet, aber nicht in der displayVolume-Funktion.

    Hinweis:

    Die $addHandler-Methode ist eine ASP.NET-AJAX-Funktion, die eine Verknüpfung zur addHandler-Methode der Sys.UI.DomEvent-Klasse bereitstellt.

  18. Speichern Sie die Seite, und drücken Sie dann STRG+F5, um sie auszuführen.

  19. Geben Sie einen Wert für den Radius ein, und klicken Sie dann auf die Schaltfläche.

    Das Ergebnis der Berechnungen, die Sie in JScript erstellt haben, wird im zweiten Textfeld angezeigt.

Nächste Schritte

In dieser exemplarischen Vorgehensweise wurde die Arbeit mit JScript-IntelliSense veranschaulicht. Möglicherweise möchten Sie mehr über die Verwendung von Clientskripts in Visual Studio erfahren. Ausführliche Informationen finden Sie unter Hinzufügen von AJAX- und Clientfunktionen. Weitere Informationen zu JScript-IntelliSense finden Sie unter Übersicht über IntelliSense für JScript.

Siehe auch

Aufgaben

Dynamisches Zuweisen von Skriptverweisen

Konzepte

Übersicht über IntelliSense für JScript

Referenz

Member auflisten

Weitere Ressourcen

Verwenden von IntelliSense

Informationen über das DHTML-Objektmodell

JScript-Objekte

SRC Attribute | src Property