Praktische Übungseinheiten: Visual Studio 2013 Web Tools

2023-06-16

Herunterladen des Trainingskits für Webcamps

Visual Studio ist eine hervorragende Entwicklungsumgebung für . NET-basierte Windows- und Webprojekte. Es enthält einen leistungsstarken Text-Editor, der problemlos zum Bearbeiten eigenständiger Dateien ohne ein Projekt verwendet werden kann.

Visual Studio verwaltet eine Analysestruktur mit vollem Funktionsumfang, während Sie jede Datei bearbeiten. Auf diese Weise kann Visual Studio unvergleichliche automatische Vervollständigungs- und dokumentbasierte Aktionen bereitstellen und gleichzeitig die Entwicklung viel schneller und angenehmer gestalten. Diese Features sind besonders leistungsfähig in HTML- und CSS-Dokumenten.

All diese Leistungsfähigkeit ist auch für Erweiterungen verfügbar, sodass Sie die Editoren einfach mit leistungsstarken neuen Features erweitern können, die Ihren Anforderungen entsprechen. Web Essentials ist eine Sammlung von (größtenteils) webbezogenen Erweiterungen von Visual Studio. Es enthält viele neue IntelliSense-Vervollständigungen (insbesondere für CSS), neue Browserlink-Features, automatisches JSHint für JavaScript-Dateien, neue Warnungen für HTML und CSS und viele andere Features, die für die moderne Webentwicklung unerlässlich sind.

Alle Beispielcode und Codeausschnitte sind im Web Camps Training Kit enthalten, das unter https://aka.ms/webcamps-training-kitverfügbar ist.

Übersicht

Ziele

In diesem praktischen Lab erfahren Sie, wie Sie:

Verwenden neuer HTML-Editor-Features, die in Web Essentials enthalten sind, z. B. umfangreiche HTML5-Codeausschnitte und Zen-Codierung
Verwenden der neuen CSS-Editor-Features in Web Essentials, z. B. farbauswahl und Browsermatrix-QuickInfo
Verwenden neuer JavaScript-Editorfeatures in Web Essentials wie Extrahieren in Datei und IntelliSense für alle HTML-Elemente
Austauschen von Daten zwischen Ihrem Browser und Visual Studio mithilfe von Browserlink

Voraussetzungen

Für dieses praktische Lab ist Folgendes erforderlich:

Microsoft Visual Studio Professional 2013 oder höher
Web Essentials 2013
Google Chrome

Einrichten

Um die Übungen in diesem praktischen Lab auszuführen, müssen Sie zuerst Ihre Umgebung einrichten.

Öffnen Sie ein Windows Explorer Fenster, und navigieren Sie zum Ordner Quelle des Labs.
Klicken Sie mit der rechten Maustaste auf Setup.cmd , und wählen Sie Als Administrator ausführen aus, um den Setupprozess zu starten, der Ihre Umgebung konfiguriert und die Visual Studio-Codeausschnitte für dieses Lab installiert.
Wenn das Dialogfeld Benutzerkontensteuerung angezeigt wird, bestätigen Sie die Aktion, um fortzufahren.

Hinweis

Stellen Sie sicher, dass Sie alle Abhängigkeiten für dieses Lab überprüft haben, bevor Sie das Setup ausführen.

Verwenden der Codeausschnitte

Im gesamten Lab-Dokument werden Sie angewiesen, Codeblöcke einzufügen. Der Einfachheit halber wird der größte Teil dieses Codes als Visual Studio Code-Codeausschnitte bereitgestellt, auf die Sie in Visual Studio 2013 zugreifen können, um zu vermeiden, dass sie manuell hinzugefügt werden müssen.

Hinweis

Jede Übung wird von einer Startlösung begleitet, die sich im Ordner Begin der Übung befindet, mit der Sie jede Übung unabhängig von den anderen ausführen können. Beachten Sie, dass die Codeausschnitte, die während einer Übung hinzugefügt werden, in diesen Startlösungen fehlen und möglicherweise erst funktionieren, wenn Sie die Übung abgeschlossen haben. Im Quellcode für eine Übung finden Sie auch einen Ordner End , der eine Visual Studio-Projektmappe mit dem Code enthält, der sich aus dem Ausführen der Schritte in der entsprechenden Übung ergibt. Sie können diese Lösungen als Leitfaden verwenden, wenn Sie zusätzliche Hilfe benötigen, während Sie dieses praktische Lab durchlaufen.

Übungen

Dieses praktische Lab umfasst die folgenden Übungen:

Arbeiten mit Browserlink und Web Essentials
Nutzen von Codeausschnitten und IntelliSense

Hinweis

Wenn Sie Visual Studio zum ersten Mal starten, müssen Sie eine der vordefinierten Einstellungssammlungen auswählen. Jede vordefinierte Auflistung ist so konzipiert, dass sie einem bestimmten Entwicklungsstil entspricht, und bestimmt Fensterlayouts, Editorverhalten, IntelliSense-Codeausschnitte und Dialogfeldoptionen. Die Verfahren in diesem Lab beschreiben die Aktionen, die erforderlich sind, um eine bestimmte Aufgabe in Visual Studio bei Verwendung der Sammlung Allgemeine Entwicklungseinstellungen auszuführen. Wenn Sie eine andere Einstellungssammlung für Ihre Entwicklungsumgebung auswählen, gibt es möglicherweise Unterschiede in den Schritten, die Sie berücksichtigen sollten.

Übung 1: Arbeiten mit Browserlink und Web Essentials

Web Essentials ist eine Visual Studio-Erweiterung, die eine Vielzahl nützlicher Features für die moderne Webentwicklung hinzufügt, die sich hauptsächlich darauf konzentriert, die Webentwicklung viel schneller und angenehmer zu gestalten. Sie können Web Essentials über den Erweiterungskatalog in Visual Studio installieren.

Browserlink ist ein neues Feature in Visual Studio 2013, das einen Kanal zwischen der Visual Studio-IDE und jedem geöffneten Browser zum Austauschen von Daten zwischen Ihrer Webanwendung und Visual Studio bereitstellt. Web Essentials erweitert Browserlink um Tools zum Bearbeiten des DOM-Objektmodells und der CSS-Stile Ihrer Webseiten direkt aus dem Browser.

In dieser Übung lernen Sie einige der Features kennen, die von Web Essentials und Browserlink unterstützt werden, um eine einfache Quizseite zu verbessern.

Aufgabe 1: Ausführen des Projekts in mehreren Browsern

In dieser Aufgabe konfigurieren Sie Ihre Webanwendung so, dass sie in mehreren Browsern gleichzeitig ausgeführt wird, was für browserübergreifende Tests nützlich ist.

Öffnen Sie Microsoft Visual Studio.
Wählen Sie im Menü Datei die Option Öffnen | Projekt/Projektmappe... und navigieren Sie im Ordner Quelle des Labs zu Ex1-WorkingwithBrowserLinkandWebEssentials\Begin (C:\WebCampsTK\HOL\VSWebTooling\Source). Wählen Sie Begin.sln aus, und klicken Sie auf Öffnen.
Erweitern Sie auf der Visual Studio-Symbolleiste das Browsermenü, und wählen Sie Durchsuchen mit... aus.

Menüoption "Durchsuchen mit"
Wählen Sie im Dialogfeld Durchsuchen mit sowohl Google Chrome als auch Internet Explorer aus, indem Sie die STRG-TASTE gedrückt halten und auf Als Standard festlegen klicken.

"

Auswählen mehrerer Standardbrowser
Sowohl Google Chrome als auch Internet Explorer sollten jetzt als Standardbrowser angezeigt werden. Klicken Sie auf Abbrechen, um das Dialogfeld zu schließen.

Google Chrome und Internet Explorer als Standardbrowser

Hinweis

Nach dem Konfigurieren der Standardbrowser wird im Browsermenü die Option Mehrere Browser ausgewählt.
Drücken Sie STRG + F5 , um die Anwendung ohne Debuggen auszuführen.
Wenn beide Browserfenster geöffnet sind, platzieren Sie eines von ihnen über dem anderen, um die Updates auf beiden Browsern gleichzeitig anzuzeigen. Die Browser sollten eine Webseite mit einem hellblauen Rechteck anzeigen.

Platzieren eines Browsers über dem anderen
Schließen Sie die Browser nicht. Sie verwenden sie in der nächsten Aufgabe.

Aufgabe 2: Verwenden von Zen Coding zum Erstellen von HTML-Elementen

Zen Coding ist ein Editor-Plug-In für die Hochgeschwindigkeitscodierung von HTML, XML, XSL (oder einem anderen strukturierten Codeformat). Der Kern dieses Plug-Ins ist eine leistungsstarke Abkürzungs-Engine, mit der Sie Ausdrücke - ähnlich wie CSS-Selektoren - in HTML-Code erweitern können. Zen Coding ist eine schnelle Möglichkeit, HTML mit einer CSS-Stilauswahlsyntax zu schreiben.

In dieser Übung verwenden Sie das Von Web Essentials bereitgestellte Feature Zen Coding, um die HTML-Schaltflächen zu generieren, die die Optionen der Frage darstellen.

Wechseln Sie zurück zu Visual Studio.
Öffnen Sie die Datei Index.cshtml im Ordner Views | Home .
Ersetzen Sie die <!-- TODO: Add options here (>Hier optionen hinzufügen) durch den folgenden Code, und drücken Sie die TAB-TASTE.
```
button.btn.btn-info.btn-lg.option{Answer $}*4
```
Der Code sollte auf HTML erweitert werden.

Erweiterter HTML-Code

Hinweis

Weitere Informationen zur Zen Coding-Syntax finden Sie im folgenden Artikel.
Klicken Sie auf die Schaltfläche Verknüpfte Browser aktualisieren , um beide Browser zu aktualisieren.

Aktualisieren verknüpfter Browser

Internet Explorer : Seite mit vier Schaltflächen aktualisiert

Google Chrome – Seite mit vier Schaltflächen aktualisiert
Wechseln Sie zurück zu Visual Studio.
Sie haben der Seite die Schaltflächen hinzugefügt, müssen aber trotzdem eine Vorlagenfrage hinzufügen. Dazu verwenden Sie ein neues Feature in Web Essentials namens Lorem Ipsum-Generator. Suchen Sie das div-Element mit dem Klassenattributevorne.
Fügen Sie den folgenden Code als erstes untergeordnetes Element des div hinzu, und drücken Sie die TAB-TASTE.
```
p.lead>lorem5
```
Der Code sollte auf HTML erweitert werden.

Lorem Ipsum automatisch generiert

Hinweis

Im Rahmen von Zen Coding können Sie lorem Ipsum-Code jetzt direkt im HTML-Editor generieren. Geben Sie einfach lorem ein, und drücken Sie TAB , und ein Lorem Ipsum-Text mit 30 Wörtern wird eingefügt. Beispielsweise fügt lorem10 10 Lorem Ipsum-Wörter ein.
Sie fügen ein Logo am Anfang der Frage hinzu, indem Sie ein weiteres neues Feature in Web Essentials namens Lorem Pixel-Generator verwenden. Fügen Sie den folgenden Code als erstes untergeordnetes Element des div-Elements mit container als Klassenwert hinzu, und drücken Sie die TAB-TASTE.
```
div.row.header>pix-436x185-abstract
```
Der Code sollte auf HTML erweitert werden.

Lorem Pixel automatisch generiert

Hinweis

Im Rahmen von Zen Coding können Sie Lorem Pixel-Code auch direkt im HTML-Editor generieren. Geben Sie einfach pix-200x200-animals ein, und drücken Sie TAB , und ein img-Tag mit einem 200x200-Bild eines Tieres wird eingefügt.
Klicken Sie auf die Schaltfläche Verknüpfte Browser aktualisieren , um beide Browser zu aktualisieren.

Internet Explorer – Automatisch generiertes Bild und Text

Google Chrome – Automatisch generiertes Bild und Text

Hinweis

Da das Bild beim Hinzufügen des Codeausschnitts zufällig ausgewählt wird, kann sich das in den Browsern angezeigte Bild unterscheiden.
Schließen Sie die Browser nicht. Sie verwenden sie in der nächsten Aufgabe.

Aufgabe 3: Aktualisieren einer Style-Eigenschaft

In dieser Aufgabe verwenden Sie das Feature "Überprüfungsmodus " des Browserlinks, um den genauen Speicherort zu ermitteln, an dem das spezifische DOM-Element generiert wird, und aktualisieren dann die Farbeigenschaft dieses Elements mithilfe einer von Web Essentials bereitgestellten Farbauswahl.

Drücken Sie im Internet Explorer Browser STRG + ALT + I, um den Überprüfungsmodus zu aktivieren.
Bewegen Sie den Mauszeiger über den hellblauen Rahmen, und klicken Sie darauf.

Bewegen des Zeigers über den hellblauen Rahmen
Wechseln Sie zurück zu Visual Studio. Beachten Sie, dass das html-Element, das Sie im Browser ausgewählt haben, auch im Visual Studio-HTML-Editor ausgewählt ist.

ist,

IM HTML-Editor von Visual Studio ausgewähltes HTML-Element
Sie aktualisieren nun die front-CSS-Klasse , um das Format des ausgewählten Elements zu ändern. Drücken Sie hierzu STRG + , um das Suchfeld Navigieren zu zu öffnen. Geben Sie site.css ein, und drücken Sie die EINGABETASTE , um die Datei zu öffnen.

Öffnen der Datei "Site.css"
Drücken Sie STRG + F , und geben Sie .flip-container .front ein, um den CSS-Selektor zu suchen.
Klicken Sie auf das hellblaue Quadrat in der Border-Eigenschaft der -Klasse, um die Farbauswahl zu öffnen.

Öffnen der Farbauswahl
Erweitern Sie die Farbauswahl, indem Sie auf die Schaltfläche Chevron klicken und eine neue Farbe auswählen.

Erweitern der Farbauswahl
Drücken Sie STRG + ALT + , um verknüpfte Browser zu aktualisieren.
Wechseln Sie zum Internet Explorer, und beachten Sie, wie sich die Farbe des Rahmens geändert hat.

Internet Explorer – Rahmenfarbe aktualisiert
Wechseln Sie zu Google Chrome, und sehen Sie, wie sich die Farbe des Rahmens geändert hat.

Google Chrome – Rahmenfarbe aktualisiert
Wechseln Sie zurück zu Visual Studio.
Wechseln Sie zum Ende der Datei Site.css, und drücken Sie STRG + F , um den BTN-Selektor zu suchen.
Beachten Sie, dass die Eigenschaft -webkit-border-radius grün unterstrichen ist.

-webkit-border-radius-Eigenschaft des btn-Selektors
Platzieren Sie das Caretzeichen in der Eigenschaft -webkit-border-radius . Unter dem ersten Buchstaben des ersten Worts der Eigenschaft sollte eine blaue Linie angezeigt werden. Dies ist das Smarttag.
Drücken Sie STRG + , um das Menü "Vorschläge" zu öffnen, und klicken Sie auf Fehlende Standardeigenschaft (Rahmenradius) hinzufügen.

Fehlender Vorschlag für Standardeigenschaften hinzufügen
Die border-radius-Eigenschaft wird automatisch der CSS-Regel hinzugefügt.

Fehlende Standardeigenschaft hinzugefügt
Bewegen Sie den Zeiger über die border-radius-Eigenschaft , um die QuickInfo Browsermatrix anzuzeigen. Die QuickInfo Browsermatrix zeigt die Verfügbarkeit der Eigenschaft in jedem Browser an.

Browsermatrix-QuickInfo
Beachten Sie, dass der Wert der border-radius-Eigenschaft immer noch unterstrichen ist. Bewegen Sie den Zeiger auf den Wert, um die Warnmeldung anzuzeigen.

Border-radius-Eigenschaftswertwarnung
Entfernen Sie die Einheit des Border-radius-Eigenschaftswerts , wie in der QuickInfo vorgeschlagen.
Da border-radius die Standardeigenschaft zum Definieren von abgerundeten Rahmenecken ist, können Sie die Eigenschaft -webkit-border-radius und den Wert aus der CSS-Regel entfernen.
Platzieren Sie das Caretzeichen in der Word-Wrap-Eigenschaft , und beachten Sie, dass das Smarttag ebenfalls unten angezeigt wird.
Öffnen Sie das Menü, und klicken Sie auf Fehlende Anbieterspezifische Informationen hinzufügen.

Hinzufügen fehlender Anbieterspezifischer Vorschläge
Die -ms-word-wrap-Eigenschaft wird der CSS-Regel automatisch hinzugefügt.

Anbieterspezifische Eigenschaft hinzugefügt

Aufgabe 4: Aktualisieren des HTML-Codes aus dem Browser

In dieser Aufgabe verwenden Sie das Feature "Entwurfsmodus " des Browserlinks, um das DOM-Objekt aus dem Browser zu bearbeiten und die Änderungen an die HTML-Quelldatei in Visual Studio zu übertragen.

Drücken Sie in Google Chrome STRG + ALT + D , um den Entwurfsmodus zu aktivieren.
Bewegen Sie den Zeiger über die Lorem Ipsum dolor sit amet-Bezeichnung , und klicken Sie darauf.

Bearbeiten der Frage
Ein Cursor sollte angezeigt werden. Ersetzen Sie den ursprünglichen Text durch Wie sieht es aus, wenn ich eine längere Frage schreibe?, und drücken Sie dann ESC , um den Entwurfsmodus zu beenden.

Frage bearbeitet
Wechseln Sie zurück zu Visual Studio, und öffnen Sie Index.cshtml, falls noch nicht geöffnet. Beachten Sie, dass der innere Text des <p-Elements> aktualisiert wurde.

Aktualisierte Frage auf der HTML-Seite

Suchmaschinenoptimierung (SEO) ist der Prozess, bei dem eine Website in der Ergebnisliste einer Suchmaschine höher eingestuft wird. Je höher die Website rangiert und je konsistenter sie aufgeführt wird, desto mehr Besucher erhalten die Website von dieser Suchmaschine. Web Essentials enthält ein Analysetool, das HTML untersucht, die gefundenen Probleme meldet und Unterstützung bei deren Behebung bereitstellt.

Wechseln Sie zum Menü Ansicht , und klicken Sie auf Fehlerliste , um das Fenster Fehlerliste zu öffnen.

Fehlerliste im Menü "Ansicht"
Beachten Sie, dass es eine SEO-Warnung gibt, die darauf hinweist, dass ein <Metatag> für die Seitenbeschreibung fehlt. Doppelklicken Sie auf den SEO-Warnungseintrag, um ihn zu beheben.

Fehlerliste (Fenster)
Klicken Sie im Dialogfeld Web Essentials auf Ja, um ein Beschreibungsmetatag <> einzufügen.

"

Dialogfeld "Web Essentials"
Der Editor für _Layout.cshtml wird geöffnet, und das <Metatag> wird automatisch dem Hauptabschnitt der HTML-Datei hinzugefügt.

Metatag wird automatisch _Layout Seite hinzugefügt
Ändern Sie den Wert des Inhaltsattributes in GeekQuiz , und speichern Sie die Datei.

Übung 2: Nutzen von Codeausschnitten und IntelliSense

Mit Web Essentials wurde der HTML-Editor um zusätzliche Funktionen erweitert. In dieser Übung werden einige neue Features angezeigt, die beim Entwickeln von Webanwendungen hilfreich sind.

Aufgabe 1: Verwenden von IntelliSense in HTML-Dokumenten

Das erste neue Feature, das in dieser Aufgabe angezeigt wird, heißt Dynamic IntelliSense. Dynamisches IntelliSense liest andere Tags und Attribute, um die möglichen IDs abzuleiten, die Sie verwenden werden.

In dieser Aufgabe erstellen Sie ein neues HTML-Formularelement, das eine Bezeichnung und ein Eingabefeld enthält. Anschließend fügen Sie der Bezeichnung ein for-Attribut hinzu, um sie an die Eingabe zu binden. Anschließend werden IntelliSense-Vorschläge basierend auf den IDs der Eingaben im Bereich angezeigt.

Öffnen Sie Visual Studio Express 2013 für Web und die Projektmappe Begin.sln im Ordner Source/Ex2-TakingAdvantageofCodeSnippet andIntelliSense/Begin. Alternativ können Sie mit der Lösung fortfahren, die Sie in der vorherigen Übung erhalten haben.
Öffnen Sie in Projektmappen-Explorer die Datei Index.cshtml im Ordner Views | Home.
Fügen Sie das folgende Formular innerhalb des Abschnittselements <> hinzu.

(Codeausschnitt : VisualStudio2013WebTooling - Ex2 - Formular)
```
<form>
     <input type="text" id="name" />
</form>
```
Dem Eingabetag sollte eine Bezeichnung mit einer Beschreibung des Felds vorangestellt werden. Fügen Sie die folgende Bezeichnung vor dem Eingabetag hinzu.
```
<form>
    <label id="name">Name</label>       
    <input type="text" id="name" />
</form>
```
Das for-Attribut einer <Bezeichnung> gibt an, an welches Formularelement eine Bezeichnung gebunden ist. Der Wert des Attributs sollte gleich der ID des verknüpften Elements sein. Fügen Sie dem label-Element> das<-Attribut for hinzu. Wie in der folgenden Abbildung gezeigt, wird der Wert "name" im IntelliSense-Feld angezeigt, basierend auf der ID der Elemente innerhalb desselben Bereichs (das umschließende <Formular>).

Anzeigen der ID in IntelliSense
Löschen Sie das kürzlich hinzugefügte <Formularelement> und seinen Inhalt.

Aufgabe 2: Verwenden von HTML-Codeausschnitten

HTML5 hat mehr als 25 neue semantische Tags eingeführt. Visual Studio verfügte bereits über IntelliSense-Unterstützung für diese Tags, aber Visual Studio 2013 erleichtert das Schreiben von Markups, indem neue Codeausschnitte hinzugefügt werden. Obwohl diese Tags nicht kompliziert sind, enthalten sie einige kleine Feinheiten, z. B. das Hinzufügen der richtigen Codec-Fallbacks für das Audiotag . In dieser Aufgabe werden die HTML-Codeausschnitte für das Audiotag angezeigt.

Geben Sie < in der Datei Index.cshtml im Abschnittselement> aud< ein, wie in der folgenden Abbildung dargestellt.

Einfügen eines Audioelements
Drücken Sie die TAB-TASTE zweimal, und sehen Sie, wie der folgende Code auf der Seite hinzugefügt wird und der Cursor auf das src-Attribut der ersten Quelle gesetzt wird.
```
<audio controls="controls">
     <source src="file.mp3" type="audio/mp3" />
     <source src="file.ogg" type="audio/ogg" />
</audio>
```
Hinweis

Durch zweimaliges Drücken der TAB-TASTE wird der Codeausschnitt eingefügt. Der Audioausschnitt zeigt die Standardverwendung des Audiotags mit zwei Quelldateien für verbesserte Unterstützung.
Löschen Sie die zweite Zeile, und aktualisieren Sie die Quelle der ersten Zeile mit dem folgenden Link zur ASP.NET and Web Tools installieren: https://learn.microsoft.com/shows/asp-net-site-videos/installing-aspnet-web-tools. Der resultierende Code wird unten gezeigt.
```
<audio controls="controls">
     <source src="http://media.ch9.ms/ch9/11d8/604b8163-fad3-4f12-9607-b404201211d8/KatanaProject.mp3" type="audio/mp3" />
</audio>
```
Hinweis

Die Quelldatei wird als Beispiel verwendet. Sie können bei Bedarf eine andere Quelle verwenden.
Drücken Sie STRG + S , um die Datei zu speichern.
Drücken Sie STRG + F5 , um die Anwendung zu starten.
Beachten Sie, dass der Anwendung ein Audioplayer hinzugefügt wurde.

Audioplayer in Internet Explorer

Audioplayer in Google Chrome
Schließen Sie die Browser nicht. Sie verwenden sie in der nächsten Aufgabe.

Aufgabe 3: Verwenden von IntelliSense in JavaScript-Dokumenten

Mit Web Essentials 2013 erzeugen Stylesheets und HTML-Seiten eine Liste von IDs und Klassennamen. In dieser Aufgabe erfahren Sie, wie diese Listen die JavaScript-IntelliSense-Unterstützung in Web Essentials 2013 verbessern.

Fügen Sie in der Datei Index.cshtml den folgenden Code hinzu, um ein Skripttag für JavaScript-Code zu definieren.
```
...
</section>
@section scripts{
    <script type="text/javascript">

    </script>
}
```
Fügen Sie den folgenden Code innerhalb des Skripttags hinzu, um die Funktion für den bereiten Rückruf zu definieren.

(Codeausschnitt : VisualStudio2013WebTooling - Ex2 - ReadyFunction)
```
(function () {
    $(document).ready(function () {

    });
}());
```
Platzieren Sie das Caretzeichen im Skripttag , und drücken Sie STRG + , um das Vorschlagsmenü zu öffnen.
Klicken Sie auf In Datei extrahieren.

JavaScript-Vorschlag zum Extrahieren in Datei
Wählen Sie im Fenster Speichern unter den Ordner Skripts aus, benennen Sie die Datei init.js , und klicken Sie auf Speichern.

Fenster „Speichern unter“

Hinweis

Die init.js Datei wird erstellt, und der Inhalt des Skripts wird in die Datei verschoben.

Init.js Datei, die mit dem enthaltenen Inhalt erstellt wurde
Öffnen Sie die Datei Index.cshtml , und überprüfen Sie, ob das Skripttag durch einen Verweis auf die dateiinit.js ersetzt wurde.

Init.js HTML-Referenz
Wechseln Sie zum Projektmappen-Explorer, und beachten Sie, dass die init.js-Datei automatisch in die Projektmappe eingeschlossen wurde.

Init.js Datei, die in der Projektmappe enthalten ist
Wechseln Sie zurück zur init.js-Datei , um den bereiten Funktionsrückruf zu aktualisieren.
Fügen Sie in der Funktionsrückrufdefinition, die an ready übergeben wird, den folgenden Code hinzu, um alle Elemente durch ein bestimmtes Klassenattribut abzurufen.
```
(function () {
     $(document).ready(function () {
          document.getElementsByClassName("")
     });
}());
```
Drücken Sie strg + leer zwischen den Anführungszeichen innerhalb des Funktionsaufrufs getElementsByClassName .

Anzeigen von IntelliSense für die getElementsByClassName-Funktion

Hinweis

Beachten Sie, dass IntelliSense die klassen anzeigt, die in den Projektstilblättern definiert sind.

Ersetzen Sie die von Ihnen erstellte Zeile durch den folgenden Code.

(function () {
     $(document).ready(function () {
          var audioElements = document.getElementsByTagName("au");
     });
}());

Positionieren Sie den Cursor nach au in den Anführungszeichen in der GetElementsByTagName-Funktion, und drücken SieSTRG-Leertaste + .

Anzeigen von IntelliSense für die getElementsByTagName-Methode
Wählen Sie in der Liste "Audio" aus, und drücken Sie die EINGABETASTE. Das Ergebnis ist in der folgenden Abbildung dargestellt.

Abrufen von Audioelementen
Klicken Sie in Projektmappen-Explorer mit der rechten Maustaste auf die dateiinit.js im Ordner Skripts, und wählen Sie im Menü Web Essentials die Option JavaScript-Dateien minifizieren aus.

Minimieren von JavaScript-Dateien
Wenn Sie aufgefordert werden, die automatische Minifizierung zu aktivieren, wenn sich die Quelldatei ändert, klicken Sie auf Ja.

Aktivieren der automatischen Minifizierungswarnung

Hinweis

Die init.min.js wird erstellt und als Abhängigkeit der init.js-Datei hinzugefügt.

Init.min.js Datei erstellt
Öffnen Sie die init.min.js Datei, und beachten Sie, dass die Datei verknälkt ist.

Init.min.js Dateiinhalt
Fügen Sie in der init.js-Datei den folgenden Code unter dem Funktionsaufruf getElementsByTagName hinzu, um alle Audioelemente wiederzugeben.

(Codeausschnitt : VisualStudio2013WebTooling - Ex2 - PlayAudioElements)
```
var len = audioElements.length;
for (var i = 0; i < len; i++) {
    audioElements[i].play();
}
```
Klicken Sie auf STRG + S , um die Datei zu speichern. Da die verknaktete Datei bereits geöffnet wurde, wird ein Dialogfeld angezeigt, in dem steht, dass die Datei außerhalb des Quell-Editors geändert wurde. Klicken Sie auf Ja.

Microsoft Visual Studio-Warnung
Wechseln Sie zurück zur init.min.js-Datei , um zu überprüfen, ob die Datei mit dem neuen Code aktualisiert wurde.

Init.min.js Datei aktualisiert
Klicken Sie auf die Schaltfläche Browserlink aktualisieren .
Sobald beide Browser aktualisiert wurden, werden die Audioplayer, die Sie in der vorherigen Aufgabe gesehen haben, automatisch wiedergegeben.

ist

In der Ansicht enthaltener Audioplayer

Zusammenfassung

Durch Die Durchführung dieses praktischen Labs haben Sie gelernt, wie Sie:

Verwenden sie neue HTML-Editorfunktionen, die in Web Essentials enthalten sind, z. B. umfangreiche HTML5-Codeausschnitte und Zen-Codierung
Verwenden der neuen CSS-Editorfeatures, die in Web Essentials enthalten sind, z. B. die Farbauswahl und die Browsermatrix-QuickInfo
Verwenden der neuen JavaScript-Editorfeatures, die in Web Essentials enthalten sind, z. B. Extrahieren in Datei und IntelliSense für alle HTML-Elemente
Austauschen von Daten zwischen Ihrem Browser und Visual Studio mithilfe von Browserlink

Freigeben über

Praktische Übungseinheiten: Visual Studio 2013 Web Tools

Übersicht

Ziele

Voraussetzungen

Einrichten

Verwenden der Codeausschnitte

Übungen

Übung 1: Arbeiten mit Browserlink und Web Essentials

Aufgabe 1: Ausführen des Projekts in mehreren Browsern

Aufgabe 2: Verwenden von Zen Coding zum Erstellen von HTML-Elementen

Aufgabe 3: Aktualisieren einer Style-Eigenschaft

Aufgabe 4: Aktualisieren des HTML-Codes aus dem Browser

Aufgabe 5 - Überprüfen von SEO-bezogenen Warnungen

Übung 2: Nutzen von Codeausschnitten und IntelliSense

Aufgabe 1: Verwenden von IntelliSense in HTML-Dokumenten

Aufgabe 2: Verwenden von HTML-Codeausschnitten

Aufgabe 3: Verwenden von IntelliSense in JavaScript-Dokumenten

Zusammenfassung

Feedback

Zusätzliche Ressourcen