Praktische Übung: Visual Studio 2013-Webtools

von Web Camps Team

Download Web Camps Training Kit

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

Visual Studio verwaltet während der Bearbeitung jeder Datei einen Analysebaum mit vollem Funktionsumfang. Auf diese Weise kann Visual Studio unvergleichliche automatische Vervollständigungs- und dokumentbasierte Aktionen bereitstellen und gleichzeitig die Entwicklungserfahrung wesentlich 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, wodurch es einfach ist, die Editoren mit leistungsstarken neuen Features auf Ihre Anforderungen anzupassen. Web Essentials ist eine Sammlung von (hauptsächlich) webbezogenen Verbesserungen für Visual Studio. Es enthält viele neue IntelliSense-Fertigstellungen (insbesondere für CSS), neue Browserlink-Features, automatische JSHint für JavaScript-Dateien, neue Warnungen für HTML und CSS und viele andere Features, die für die moderne Webentwicklung von wesentlicher Bedeutung sind.

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

Übersicht

Ziele

In dieser praktischen Übung erfahren Sie, wie Sie:

• Verwenden Sie neue HTML-Editorfunktionen, die in Web Essentials enthalten sind, wie umfangreiche HTML5-Codeausschnitte und Zen-Codierung.
• Verwenden Sie neue CSS-Editorfunktionen, die in Web Essentials enthalten sind, wie den Farbwähler und das Tooltip "Browsermatrix".
• Verwenden neuer JavaScript-Editorfeatures, die in Web Essentials enthalten sind, z. B. "In Datei extrahieren" und "IntelliSense" für alle HTML-Elemente
• Austauschen von Daten zwischen Ihrem Browser und Visual Studio mithilfe von Browserlink

Voraussetzungen

Für die Durchführung dieser praktischen Laborübungen ist Folgendes erforderlich:

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

Konfiguration

Um die Übungen in diesem praktischen Labor ausführen zu können, müssen Sie zuerst Ihre Umgebung einrichten.

1. Öffnen Sie ein Windows Explorer-Fenster, und navigieren Sie zum Quellordner des Labors.
2. Klicken Sie mit der rechten Maustaste auf Setup.cmd , und wählen Sie "Als Administrator ausführen " aus, um den Setupvorgang zu starten, der Ihre Umgebung konfiguriert und die Visual Studio-Codeausschnitte für diese Übung installiert.
3. Wenn das Dialogfeld "Benutzerkontensteuerung" angezeigt wird, bestätigen Sie, dass die Aktion fortgesetzt werden soll.

Verwendung von Code-Snippets

Im gesamten Lab-Dokument werden Sie angewiesen, Codeblöcke einzufügen. Aus Gründen der Einfachheit wird der großteil dieses Codes als Visual Studio Code Snippets bereitgestellt, auf die Sie in Visual Studio 2013 zugreifen können, um zu vermeiden, dass Sie ihn manuell hinzufügen müssen.

Übungen

Dieses praktische Labor umfasst die folgenden Übungen:

1. Arbeiten mit Browser Link und Web Essentials
2. Nutzen von Codeausschnitten und IntelliSense

Ü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 aus dem 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 bereitstellt, um Daten zwischen Ihrer Webanwendung und Visual Studio auszutauschen. Web Essentials erweitert den Browserlink mit Tools zum Bearbeiten des DOM-Objektmodells und der CSS-Formatvorlagen Ihrer Webseiten direkt über den Browser.

In dieser Übung werden Sie einige der Features erkunden, 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.

1. Öffnen Sie Microsoft Visual Studio.

2. Wählen Sie im Menü „Datei“ die Option „Öffnen | Projekt/Projektmappe...“ und wechseln Sie zu Ex1-WorkingwithBrowserLinkandWebEssentials\Begin im Quellordner des Labors (C:\WebCampsTK\HOL\VSWebTooling\Source). Wählen Sie Begin.sln aus , und klicken Sie auf "Öffnen".

3. Erweitern Sie in der Visual Studio-Symbolleiste das Browsermenü, und wählen Sie "Durchsuchen mit..." aus.

   

   Menüoption "Durchsuchen mit"

4. 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

5. 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 der Konfiguration der Standardbrowser wird die Option "Mehrere Browser " im Browsermenü ausgewählt.

   

6. Drücken Sie STRG + F5 , um die Anwendung ohne Debugging auszuführen.

7. Wenn beide Browserfenster geöffnet sind, platzieren Sie einen davon ü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

8. 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-Plugin für das schnelle HTML-, XML-, XSL- (oder jedes andere strukturierte Codeformat) Codieren und Bearbeiten. Der Kern dieses Plug-Ins ist ein leistungsstarkes Abkürzungsmodul, mit dem Sie Ausdrücke -similar zu CSS-Selektoren in HTML-Code erweitern können. Zen Coding ist eine schnelle Möglichkeit, HTML mithilfe einer CSS-Formatauswahlsyntax zu schreiben.

In dieser Übung verwenden Sie die Zen Coding-Funktion, die von Web Essentials bereitgestellt wird, um die HTML-Schaltflächen zu generieren, die die Optionen der Frage darstellen.

1. Wechseln Sie zurück zu Visual Studio.

2. Öffnen Sie die Datei Index.cshtml , die sich im Ordner "Views | Home " befindet.

3. Ersetzen Sie den Kommentar <-- TODO: Fügen Sie hier Optionen hinzu–> durch den folgenden Code und drücken Sie die TAB-Taste.

   button.btn.btn-info.btn-lg.option{Answer $}*4
   

4. Der Code sollte auf HTML erweitert werden.

   

   Erweiterter HTML-Code

   Hinweis

   Weitere Informationen zur Zen Coding-Syntax finden Sie im folgenden Artikel.

5. 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

6. Wechseln Sie zurück zu Visual Studio.

7. Sie haben der Seite die Schaltflächen hinzugefügt, aber Sie müssen dennoch eine Vorlagenfrage hinzufügen. Dazu verwenden Sie ein neues Feature in Web Essentials namens Lorem Ipsum-Generator. Suchen Sie das div-Element mit dem Klassenattributfront.

8. Fügen Sie den folgenden Code als erstes untergeordnetes Element des div-Elements hinzu, und drücken Sie die TAB-TASTE.

   p.lead>lorem5
   

9. Der Code sollte auf HTML erweitert werden.

   

   Lorem Ipsum automatisch generiert

   Hinweis

   Im Rahmen von Zen Coding können Sie jetzt Lorem Ipsum-Code direkt im HTML-Editor generieren. Geben Sie einfach Lorem ein, und drücken Sie TAB , und ein 30 Wort Lorem Ipsum-Text wird eingefügt. Beispielsweise fügt lorem10 10 Lorem Ipsum Wörter ein.

10. Sie fügen oben in der Frage ein Logo 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
    

11. Der Code sollte auf HTML erweitert werden.

    

    Lorem Pixel automatisch generiert

    Hinweis

    Im Rahmen von Zen Coding können Sie auch Lorem Pixel-Code direkt im HTML-Editor generieren. Geben Sie einfach pix-200x200-Tiere ein, und drücken Sie TAB und ein Img-Tag mit einem Bild von 200x200 eines Tieres wird eingefügt.

12. 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 gezeigte Bild unterscheiden.

13. 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 "Inspect Mode des Browser Link", um den genauen Ort zu ermitteln, an dem das spezifische DOM-Element generiert wird, und dann die Farbeigenschaft dieses Elements mithilfe einer Farbauswahl, die von Web Essentials bereitgestellt wird, zu aktualisieren.

1. Drücken Sie im Internet Explorer-Browser STRG + ALT + I , um den Überprüfungsmodus zu aktivieren.

2. Bewegen Sie den Mauszeiger über den hellblauen Rahmen, und klicken Sie darauf.

   

   Bewegen des Zeigers über den hellblauen Rahmen

3. Wechseln Sie zurück zu Visual Studio. Beachten Sie, dass das im Browser ausgewählte HTML-Element auch im HTML-Editor von Visual Studio ausgewählt ist.

   

   IM HTML-Editor von Visual Studio ausgewähltes HTML-Element

4. Sie aktualisieren nun die Front-CSS-Klasse, um das Format des ausgewählten Elements zu ändern. Drücken Sie dazu STRG + , um das Suchfeld zu öffnen. Geben Sie site.css ein , und drücken Sie die EINGABETASTE , um die Datei zu öffnen.

   

   Datei Site.css öffnen

5. Drücken Sie STRG + F , und geben Sie ".flip-container.front " ein, um die CSS-Auswahl zu finden.

6. Klicken Sie auf das hellblaue Quadrat in der Rahmeneigenschaft der Klasse, um den Farbwähler zu öffnen.

   

   Öffnen der Farbauswahl

7. Erweitern Sie die Farbauswahl, indem Sie auf die Schaltfläche "Chevron" klicken und eine neue Farbe auswählen.

   

   Erweitern der Farbauswahl

8. Drücken Sie STRG + ALT + EINGABETASTE, um verknüpfte Browser zu aktualisieren.

9. Wechseln Sie zu Internet Explorer, und beachten Sie, wie sich die Farbe des Rahmens geändert hat.

   

   Internet Explorer – Rahmenfarbe aktualisiert

10. Wechseln Sie zu Google Chrome, und beachten Sie, wie sich die Farbe des Rahmens geändert hat.

    

    Google Chrome – Rahmenfarbe aktualisiert

11. Wechseln Sie zurück zu Visual Studio.

12. Wechseln Sie zum Ende der Site.css Datei und drücken Sie STRG + F, um den .btn Selektor zu suchen.

13. Beachten Sie, dass die Eigenschaft "-webkit-border-radius " grün unterstrichen ist.

    

    -webkit-border-radius-Eigenschaft des btn-Selektors

14. Platzieren Sie das Caret 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.

15. Drücken Sie STRG + . Um das Menü "Vorschläge" zu öffnen und auf " Fehlende Standardeigenschaft hinzufügen" (Rahmenradius) zu klicken.

    

    Fehlenden Vorschlag für eine Standardeigenschaft hinzufügen

16. Die Border-Radius-Eigenschaft wird der CSS-Regel automatisch hinzugefügt.

    

    Fehlende Standardeigenschaft hinzugefügt

17. Bewegen Sie den Mauszeiger über die Eigenschaft "Rahmenradius ", um die QuickInfo der Browsermatrix anzuzeigen. Die Tooltip "Browsermatrix zeigt die Verfügbarkeit der Eigenschaft in jedem Browser an.

    

    Tooltip zur Browsermatrix

18. Beachten Sie, dass der Wert der Eigenschaft "Rahmenradius " noch unterstrichen ist. Bewegen Sie den Mauszeiger über den Wert, um die Warnmeldung anzuzeigen.

    

    Warnung des Eigenschaftswerts "Rahmenradius"

19. Entfernen Sie die Einheit des Werts der Eigenschaft "border-radius", wie sie vom Tooltip vorgeschlagen wird.

20. Als border-radius die Standardeigenschaft zum Definieren der Abrundung von Rahmenecken ist, können Sie die -webkit-border-radius-Eigenschaft und den Wert aus der CSS-Regel entfernen.

21. Platzieren Sie das Caret in der Word-Wrap-Eigenschaft , und beachten Sie, dass das Smarttag auch unten angezeigt wird.

22. Öffnen Sie das Menü, und klicken Sie auf "Fehlende Anbieterspezifische Hinzufügen".

    

    Hinzufügen fehlender Anbieterspezifischer Vorschläge

23. Die Eigenschaft "-ms-word-wrap" 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 Browsers", um das DOM-Objekt aus dem Browser zu bearbeiten und die Änderungen an die HTML-Quelldatei in Visual Studio zu übertragen.

1. Drücken Sie in Google Chrome STRG + ALT + D , um den Entwurfsmodus zu aktivieren.

2. Bewegen Sie den Mauszeiger über die Lorem Ipsum dolor-Beschriftung, und klicken Sie darauf.

   

   Bearbeiten der Frage

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

   

   Bearbeitete Frage

4. 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

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

Die Suchmaschinenoptimierung (SEO) ist der Prozess, eine Website in der Liste der Ergebnisse einer Suchmaschine höher zu machen. Je höher die Website rangiert und je konsequenter sie aufgeführt wird, desto mehr Besucher erhält die Website von dieser Suchmaschine. Web Essentials enthält ein Analysetool, das HTML untersucht, die gefundenen Probleme meldet und Unterstützung zur Behebung bietet.

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

   

   Fehlerliste im Menü "Ansicht"

2. Beachten Sie, dass es eine SEO-Warnung gibt, die benachrichtigt, dass ein <Metatag> für die Seitenbeschreibung fehlt. Doppelklicken Sie auf den SEO-Warneintrag, um ihn zu beheben.

   

   Fehlerlistenfenster

3. Klicken Sie im Dialogfeld "Web Essentials" auf "Ja", um ein Beschreibungsmetatag <> einzufügen.

   

   Dialogfeld 'Web Essentials'

4. Der Editor für _Layout.cshtml wird geöffnet, und das <Metatag> wird automatisch zum Kopfabschnitt der HTML-Datei hinzugefügt.

   

   Meta-Tag automatisch zur _Layout-Seite hinzugefügt

5. Ä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 mit zusätzlicher Funktionalität 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 Sie in dieser Aufgabe sehen, heißt Dynamic IntelliSense. Dynamic 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 Beschriftung und ein Eingabefeld enthält. Anschließend fügen Sie dem Label ein for-Attribut hinzu, um es an das Eingabefeld zu binden, und Sie sehen IntelliSense-Vorschläge basierend auf den IDs der Input-Felder im Geltungsbereich.

1. Öffnen Sie Visual Studio Express 2013 für Web und die Begin.sln Projektmappe, die sich im Ordner "Source/Ex2-TakingAdvantageofCodeSnippetsandIntelliSense/Begin " befindet. Alternativ können Sie mit der Lösung fortfahren, die Sie in der vorherigen Übung erhalten haben.

2. Öffnen Sie im Projektmappen-Explorer die Datei Index.cshtml , die sich im Ordner "Views | Home " befindet.

3. Fügen Sie das folgende Formular innerhalb des <Abschnittselements> hinzu.

   (Codeausschnitt - VisualStudio2013WebTooling - Ex2 - Formular)

   <form>
        <input type="text" id="name" />
   </form>
   

4. Dem Eingabetag sollte eine Beschriftung mit einer Beschreibung des Felds vorangestellt werden. Fügen Sie vor dem input-Tag die folgende Beschriftung hinzu.

   <form>
       <label id="name">Name</label>       
       <input type="text" id="name" />
   </form>
   

5. Das for-Attribut eines <Labels> gibt an, an welches Formularelement ein Label gebunden ist. Der Wert des Attributs sollte der ID des zugehörigen Elements entsprechen. Fügen Sie das for-Attribut dem <Label-Element> hinzu. Wie in der folgenden Abbildung dargestellt, wird der Wert "Name" im IntelliSense-Feld angezeigt, basierend auf der ID der Elemente innerhalb desselben Bereichs (das eingeschlossene <Formular>).

   

   Anzeigen der ID in IntelliSense

6. Löschen Sie das zuletzt hinzugefügte <Formularelement> und dessen Inhalt.

Aufgabe 2 – Verwenden von HTML-Codeausschnitten

HTML5 hat mehr als 25 neue semantische Tags eingeführt. Visual Studio verfügt bereits über IntelliSense-Unterstützung für diese Tags, visual Studio 2013 erleichtert jedoch das Schreiben von Markup durch Hinzufügen neuer Codeausschnitte. Obwohl diese Tags nicht kompliziert sind, enthalten sie einige kleine Subtilitäten, z. B. das Hinzufügen der richtigen Codec-Fallbacks für das Audiotag . In dieser Aufgabe sehen Sie die HTML-Codeausschnitte für das Audiotag.

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

   

   Einfügen eines Audioelements

2. Drücken Sie zweimal DIE TAB-TASTE , und beachten Sie, wie der folgende Code auf der Seite hinzugefügt wird, und der Cursor wird im src-Attribut der ersten Quelle platziert.

   <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 standardmäßige Verwendung des Audiotags mit zwei Quelldateien zur verbesserten Unterstützung.

3. Löschen Sie die zweite Zeile und aktualisieren Sie die Quelle der ersten Zeile mit dem folgenden Link zur Installieren von ASP.NET und Webtools Show: https://learn.microsoft.com/shows/asp-net-site-videos/installing-aspnet-web-tools. Der resultierende Code wird unten angezeigt.

   <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.

4. Drücken Sie STRG + S , um die Datei zu speichern.

5. Drücken Sie STRG + F5 , um die Anwendung zu starten.

6. Beachten Sie, dass der Anwendung ein Audioplayer hinzugefügt wurde.

   

   Audioplayer in Internet Explorer

   

   Audioplayer in Google Chrome

7. 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.

1. 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>
   }
   

2. Fügen Sie den folgenden Code innerhalb des Skripttags hinzu, um die bereite Rückruffunktion zu definieren.

   (Codeausschnitt - VisualStudio2013WebTooling - Ex2 - ReadyFunction)

   (function () {
       $(document).ready(function () {
   
       });
   }());
   

3. Platzieren Sie das Caret im Skripttag, und drücken Sie STRG + ., um das Vorschlagsmenü zu öffnen.

4. Klicken Sie auf "In Datei extrahieren".

   

   JavaScript-Extrakt als Dateivorschlag

5. 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

6. Öffnen Sie die Datei Index.cshtml , und überprüfen Sie, ob das Skripttag durch einen Verweis auf die init.js Datei ersetzt wurde.

   

   Init.js HTML-Referenz

7. 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 Lösung enthalten ist

8. Wechseln Sie zurück zur init.js Datei, um den bereiten Funktionsrückruf zu aktualisieren.

9. Fügen Sie innerhalb 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("")
        });
   }());
   

10. Drücken Sie STRG + LEERTASTE zwischen den Anführungszeichen innerhalb des getElementsByClassName-Funktionsaufrufs.

    

    Anzeigen von IntelliSense für die getElementsByClassName-Funktion

    Hinweis

    Beachten Sie, dass IntelliSense die klassen anzeigt, die in den Projekt stylesheets definiert sind.

11. Ersetzen Sie die Zeile, die Sie mit dem folgenden Code erstellt haben.

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

12. Positionieren Sie den Cursor nach au innerhalb der Anführungszeichen in der Funktion getElementsByTagName und drücken Sie STRG + Leertaste.

    

    Anzeigen von IntelliSense für die getElementsByTagName-Methode

13. 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

14. Klicken Sie im Projektmappen-Explorer mit der rechten Maustaste auf die init.js Datei im Ordner "Skripts", und wählen Sie im Menü "Web Essentials" die Option "Minify JavaScript"-Dateien aus.

    

    JavaScript-Datei(en) minifizieren

15. Wenn Sie aufgefordert werden, die automatische Minimierung zu aktivieren, wenn sich die Quelldatei ändert, klicken Sie auf "Ja".

    

    Aktivieren der automatischen Minimierungswarnung

    Hinweis

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

    

    Init.min.js Datei erstellt

16. Öffnen Sie die init.min.js Datei, und beachten Sie, dass die Datei minimiert wird.

    

    Init.min.js Dateiinhalt

17. Fügen Sie in der dateiinit.js den folgenden Code unterhalb des getElementsByTagName-Funktionsaufrufs hinzu, um alle Audioelemente wiederzugeben.

    (Codeausschnitt - VisualStudio2013WebTooling - Ex2 - PlayAudioElements)

    var len = audioElements.length;
    for (var i = 0; i < len; i++) {
        audioElements[i].play();
    }
    

18. Klicken Sie auf STRG + S , um die Datei zu speichern. Da die minimierte Datei bereits geöffnet wurde, wird ein Dialogfeld angezeigt, das besagt, dass die Datei außerhalb des Quell-Editors geändert wurde. Klicken Sie auf Ja.

    

    Microsoft Visual Studio-Warnung

19. 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

20. Klicken Sie auf die Schaltfläche " Browserlink aktualisieren ".

21. Sobald beide Webbrowser aktualisiert wurden, werden die Audioplayer, die Sie in der vorherigen Aufgabe gesehen haben, automatisch abgespielt.

    

    Audioplayer in der Ansicht enthalten

Zusammenfassung

Durch die Durchführung dieser praktischen Übung haben Sie folgendes gelernt:

• Verwenden Sie neue HTML-Editorfunktionen, die in Web Essentials enthalten sind, wie umfangreiche HTML5-Codeausschnitte und Zen-Codierung.
• Verwenden Sie neue CSS-Editorfunktionen, die in Web Essentials enthalten sind, wie den Farbwähler und das Tooltip "Browsermatrix".
• Verwenden neuer JavaScript-Editorfeatures, die in Web Essentials enthalten sind, z. B. "In Datei extrahieren" und "IntelliSense" für alle HTML-Elemente
• Austauschen von Daten zwischen Ihrem Browser und Visual Studio mithilfe von Browserlink