Laboratorium praktyczne: Visual Studio 2013 Web Tools

Autor: Web Camps Team

Pobierz zestaw szkoleniowy obozów internetowych

Visual Studio to doskonałe środowisko programistyczne dla projektów Windows i sieci Web opartych na platformie .NET. Zawiera zaawansowany edytor tekstów, który można łatwo użyć do edytowania autonomicznych plików bez projektu.

Program Visual Studio utrzymuje w pełni funkcjonalne drzewo analizy podczas edytowania każdego pliku. Dzięki temu program Visual Studio zapewnia niezrównane autouzupełnianie i działania związane z dokumentami, co sprawia, że doświadczenie programistyczne jest znacznie szybsze i przyjemniejsze. Te funkcje są szczególnie zaawansowane w dokumentach HTML i CSS.

Cała ta moc jest również dostępna dla rozszerzeń, dzięki czemu można łatwo rozszerzyć edytory o zaawansowane nowe funkcje, aby odpowiadały Twoim potrzebom. Web Essentials to kolekcja (głównie) ulepszeń związanych z siecią Web w programie Visual Studio. Zawiera wiele nowych uzupełnień IntelliSense (szczególnie w przypadku CSS), nowe funkcje Linku Przeglądarki, automatyczne JSHint dla plików JavaScript, nowe ostrzeżenia dla kodu HTML i CSS oraz wiele innych funkcji, które są niezbędne do nowoczesnego tworzenia stron internetowych.

Cały przykładowy kod i fragmenty kodu znajdują się w zestawie szkoleniowym Web Camps dostępnym pod adresem https://aka.ms/webcamps-training-kit.

Przegląd

Cele i zadania

W tym praktycznym laboratorium dowiesz się, jak wykonywać następujące działania:

• Używanie nowych funkcji edytora HTML zawartych w składniku Web Essentials, takich jak zaawansowane fragmenty kodu HTML5 i kodowanie Zen
• Używanie nowych funkcji edytora CSS zawartych w składnikach Web Essentials, takich jak selektor kolorów i etykietka narzędzia macierzy przeglądarki
• Używaj nowych funkcji edytora JavaScript dostępnych w Web Essentials, takich jak Eksport do pliku i IntelliSense dla wszystkich elementów HTML.
• Wymiana danych między przeglądarką a programem Visual Studio przy użyciu linku przeglądarki

Wymagania wstępne

Do ukończenia tego laboratorium praktycznego wymagane jest wykonanie następujących czynności:

• Microsoft Visual Studio Professional 2013 lub nowszy
• Web Essentials 2013
• Google Chrome

Konfiguracja

Aby uruchomić ćwiczenia w tym praktycznym laboratorium, należy najpierw skonfigurować środowisko.

1. Otwórz okno Eksploratora Windows i przejrzyj folder Source laboratorium.
2. Kliknij prawym przyciskiem myszy Setup.cmd i wybierz polecenie Uruchom jako administrator , aby uruchomić proces instalacji, który skonfiguruje środowisko i zainstaluj fragmenty kodu programu Visual Studio dla tego laboratorium.
3. Jeśli zostanie wyświetlone okno dialogowe Kontrola konta użytkownika, potwierdź akcję, aby kontynuować.

Używanie fragmentów kodu

W całym dokumencie laboratoryjnym będziesz otrzymywać instrukcje dotyczące wstawiania bloków kodu. Dla wygody większość tego kodu jest dostarczana jako fragmenty kodu programu Visual Studio Code, do których można uzyskać dostęp z poziomu programu Visual Studio 2013, aby uniknąć konieczności ręcznego dodawania go.

Ćwiczenia

To praktyczne laboratorium obejmuje następujące ćwiczenia:

1. Praca z Browser Link i Web Essentials
2. Korzystanie z fragmentów kodu i funkcji IntelliSense

Ćwiczenie 1. Praca z linkiem przeglądarki i elementami Web Essentials

Web Essentials to rozszerzenie programu Visual Studio, które dodaje wiele przydatnych funkcji do nowoczesnego tworzenia aplikacji internetowych, głównie koncentruje się na tworzeniu środowiska tworzenia aplikacji internetowych znacznie szybciej i przyjemniej. Program Web Essentials można zainstalować z galerii rozszerzeń w programie Visual Studio.

Link przeglądarki to nowa funkcja zawarta w programie Visual Studio 2013, która udostępnia kanał między środowiskiem IDE programu Visual Studio i dowolną otwartą przeglądarką w celu wymiany danych między aplikacją internetową a programem Visual Studio. Web Essentials rozszerza Link przeglądarki o narzędzia do bezpośredniego manipulowania modelem DOM i stylami CSS Twoich stron internetowych z poziomu przeglądarki.

W tym ćwiczeniu zapoznasz się z niektórymi funkcjami obsługiwanymi przez Web Essentials i Browser Link, aby ulepszyć prostą stronę quizu.

Zadanie 1 . Uruchamianie projektu w wielu przeglądarkach

W tym zadaniu skonfigurujesz aplikację internetową do uruchamiania w wielu przeglądarkach jednocześnie, co jest przydatne w przypadku testowania między przeglądarkami.

1. Otwórz program Microsoft Visual Studio.

2. W menu Plik wybierz Otwórz | Projekt/rozwiązanie... i przejdź do folderu Ex1-WorkingwithBrowserLinkandWebEssentials\Begin w folderze Source lab (C:\WebCampsTK\HOL\VSWebTooling\Source). Wybierz Begin.sln i kliknij przycisk Otwórz.

3. Na pasku narzędzi programu Visual Studio rozwiń menu przeglądarki i wybierz pozycję Przeglądaj za pomocą....

   

   Opcja menu 'Przeglądaj za pomocą'

4. W oknie dialogowym Przeglądaj za pomocą zaznacz zarówno Przeglądarki Google Chrome , jak i Internet Explorer , trzymając wciśnięty klawisz CTRL , a następnie kliknij przycisk Ustaw jako domyślny.

   

   Wybieranie wielu przeglądarek domyślnych

5. Przeglądarki Google Chrome i Internet Explorer powinny teraz być wyświetlane jako przeglądarki domyślne. Kliknij przycisk Anuluj , aby zamknąć okno dialogowe.

   

   Przeglądarki Google Chrome i Internet Explorer jako przeglądarki domyślne

   Uwaga / Notatka

   Po skonfigurowaniu domyślnych przeglądarek w menu przeglądarki jest wybrana opcja Wiele przeglądarek .

   

6. Naciśnij klawisze CTRL + F5 , aby uruchomić aplikację bez debugowania.

7. Po otwarciu obu okien przeglądarki umieść jeden z nich nad drugim, aby wyświetlić aktualizacje w obu przeglądarkach jednocześnie. Przeglądarki powinny wyświetlać stronę internetową z jasnoniebieskim prostokątem.

   

   Umieszczenie jednej przeglądarki nad drugą

8. Nie zamykaj przeglądarek. Będą one używane w następnym zadaniu.

Zadanie 2. Używanie kodowania Zen do tworzenia elementów HTML

Kodowanie Zen to wtyczka edytora do szybkiego kodowania i edytowania kodu HTML, XML, XSL (lub innego formatu kodu ustrukturyzowanego). Rdzeniem tej wtyczki jest potężny silnik skrótów, który umożliwia rozszerzanie wyrażeń - podobnych do selektorów CSS - na kod HTML. Kodowanie Zen to szybki sposób pisania kodu HTML przy użyciu składni selektora stylów CSS.

W tym ćwiczeniu użyjesz funkcji Kodowania Zen dostarczonej przez web essentials, aby wygenerować przyciski HTML reprezentujące opcje pytania.

1. Wróć do programu Visual Studio.

2. Otwórz plik Index.cshtml znajdujący się w folderze Views | Home .

3. Zastąp <-- TODO: dodaj tutaj opcje —> komentarz następującym kodem i naciśnij klawisz TAB.

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

4. Kod powinien zostać rozszerzony do kodu HTML.

   

   Rozwinięty kod HTML

   Uwaga / Notatka

   Aby dowiedzieć się więcej na temat składni kodowania Zen, zobacz następujący artykuł.

5. Kliknij przycisk Odśwież połączone przeglądarki , aby zaktualizować obie przeglądarki.

   

   Odświeżanie połączonych przeglądarek

   

   Internet Explorer — strona zaktualizowana za pomocą czterech przycisków

   

   Google Chrome — strona zaktualizowana za pomocą czterech przycisków

6. Wróć do programu Visual Studio.

7. Nadano przyciski stronie, ale wciąż należy dodać pytanie w szablonie. W tym celu użyjesz nowej funkcji w narzędziu Web Essentials o nazwie Lorem Ipsum generator. Znajdź element div z atrybutem klasyfront.

8. Dodaj następujący kod jako pierwszy element podrzędny div i naciśnij klawisz TAB.

   p.lead>lorem5
   

9. Kod powinien zostać rozszerzony do kodu HTML.

   

   Lorem Ipsum wygenerowany automatycznie

   Uwaga / Notatka

   W ramach kodowania Zen można teraz wygenerować kod Lorem Ipsum bezpośrednio w edytorze HTML. Po prostu wpisz lorem i naciśnij TAB, a 30 wyrazów Lorem Ipsum zostanie wstawionych. Na przykład lorem10 wstawia 10 wyrazów Lorem Ipsum.

10. W górnej części pytania dodasz logo, używając innej nowej funkcji w web Essentials o nazwie Generator Lorem Pixel. Dodaj następujący kod jako pierwszy element podrzędny elementu div z kontenerem jako wartością klasy i naciśnij klawisz TAB.

    div.row.header>pix-436x185-abstract
    

11. Kod powinien rozwinąć się do kodu HTML.

    

    Lorem Pixel automatycznie wygenerowany

    Uwaga / Notatka

    W ramach kodowania Zen można również wygenerować kod Lorem Pixel bezpośrednio w edytorze HTML. Po prostu wpisz pix-200x200-animals i naciśnij TAB, a tag img z obrazem zwierzęcia o rozmiarze 200x200 zostanie wstawiony.

12. Kliknij przycisk Odśwież połączone przeglądarki , aby zaktualizować obie przeglądarki.

    

    Internet Explorer — automatycznie wygenerowany obraz i tekst

    

    Google Chrome — automatycznie wygenerowany obraz i tekst

    Uwaga / Notatka

    Ponieważ obraz jest wybierany losowo podczas dodawania fragmentu kodu, obraz pokazany w przeglądarkach może się różnić.

13. Nie zamykaj przeglądarek. Będą one używane w następnym zadaniu.

Zadanie 3 — aktualizowanie właściwości stylu

W tym zadaniu użyjesz funkcji Tryb inspekcji w Browser Link, aby wykryć dokładną lokalizację generowania konkretnego elementu DOM, a następnie zaktualizować właściwość koloru tego elementu za pomocą narzędzia do wybierania kolorów dostarczonego przez Web Essentials.

1. W przeglądarce Internet Explorer naciśnij klawisze CTRL + ALT + I , aby włączyć tryb inspekcji.

2. Przenieś wskaźnik nad jasnoniebieską obramowaniem i kliknij.

   

   Przesuwając wskaźnik nad jasnoniebieską obramowaniem

3. Wróć do programu Visual Studio. Zwróć uwagę, że element HTML wybrany w przeglądarce jest również wybierany w edytorze HTML programu Visual Studio.

   

   Element HTML wybrany w edytorze HTML programu Visual Studio

4. Teraz zaktualizujesz klasę frontu CSS, aby zmienić styl wybranego elementu. Aby to zrobić, naciśnij klawisze CTRL + , aby otworzyć pole wyszukiwania Przejdź do . Wpisz site.css i naciśnij klawisz ENTER , aby otworzyć plik.

   

   Otwieranie Site.css pliku

5. Naciśnij klawisze CTRL + F i wpisz .flip-container .front , aby znaleźć selektor CSS.

6. Kliknij jasnoniebieski kwadrat we właściwości obramowania klasy, aby otworzyć selektor kolorów.

   

   Otwieranie selektora kolorów

7. Rozwiń selektor kolorów, klikając przycisk chevron i wybierając nowy kolor.

   

   Rozszerzanie selektora kolorów

8. Naciśnij klawisze CTRL + ALT + ENTER , aby odświeżyć połączone przeglądarki.

9. Przełącz się do programu Internet Explorer i zwróć uwagę na zmianę koloru obramowania.

   

   Internet Explorer — zaktualizowano kolor obramowania

10. Przejdź do przeglądarki Google Chrome i zwróć uwagę na zmianę koloru obramowania.

    

    Google Chrome — zaktualizowano kolor obramowania

11. Wróć do programu Visual Studio.

12. Przejdź na końcu pliku Site.css i naciśnij klawisze CTRL + F , aby zlokalizować selektor btn .

13. Zwróć uwagę, że właściwość -webkit-border-radius jest podkreślona kolorem zielonym.

    

    -webkit-border-radius właściwość selektora „btn”

14. Umieść kursor we właściwości -webkit-border-radius. Niebieska linia powinna pojawić się pod pierwszą literą pierwszego słowa nazwy właściwości. Jest to tag inteligentny.

15. Naciśnij klawisze CTRL + . Aby otworzyć menu sugestii, a następnie kliknij pozycję Dodaj brakującą właściwość standardową (border-radius).

    

    Dodawanie brakującej standardowej sugestii właściwości

16. Właściwość radius obramowania jest automatycznie dodawana do reguły CSS.

    

    Dodano brakującą właściwość standardową

17. Przenieś wskaźnik nad właściwością radius obramowania , aby wyświetlić etykietkę narzędzia macierzy przeglądarki. Etykietka narzędzia Macierz przeglądarki pokazuje dostępność właściwości w każdej przeglądarce.

    

    Etykietka narzędzia macierzy przeglądarki

18. Zwróć uwagę, że wartość właściwości radius obramowania jest nadal podkreślona. Przenieś wskaźnik nad wartością, aby wyświetlić komunikat ostrzegawczy.

    

    Ostrzeżenie o wartości właściwości border-radius

19. Usuń jednostkę wartości właściwości border-radius zgodnie z sugestią podpowiedzi.

20. Ponieważ border-radius jest standardową właściwością służącą do definiowania sposobu zaokrąglania narożników obramowania, można usunąć właściwość -webkit-border-radius i wartość z reguły CSS.

21. Umieść kursor tekstowy we właściwości word-wrap i zwróć uwagę, że znacznik inteligentny również pojawia się poniżej.

22. Otwórz menu i kliknij pozycję Dodaj brakujące szczegóły dostawcy.

    

    Dodaj sugestie brakujących szczegółów dostawcy

23. Właściwość -ms-word-wrap jest automatycznie dodawana do reguły CSS.

    

    Dodano właściwość specyficzną dla dostawcy

Zadanie 4 . Aktualizowanie kodu HTML z przeglądarki

W tym zadaniu użyjesz funkcji Tryb projektowania Browser Link, aby edytować obiekt DOM w przeglądarce i przenieść zmiany do pliku źródłowego HTML w programie Visual Studio.

1. W przeglądarce Google Chrome naciśnij klawisze CTRL + ALT + D , aby włączyć tryb projektowania.

2. Przenieś wskaźnik na etykietę Lorem Ipsum dolor sit amet i kliknij.

   

   Edytowanie pytania

3. Powinien zostać wyświetlony kursor. Zastąp oryginalny tekst zdaniem Jak wygląda, gdy piszę dłuższe pytanie?, a następnie naciśnij klawisz ESC, aby wyjść z trybu projektowania.

   

   Pytanie edytowane

4. Przejdź z powrotem do programu Visual Studio i otwórz plik Index.cshtml, jeśli jeszcze nie został otwarty. Zwróć uwagę, że tekst <wewnętrzny elementu p> został zaktualizowany.

   

   Zaktualizowane pytanie na stronie HTML

Zadanie 5 . Przeglądanie ostrzeżeń związanych z seo

Optymalizacja aparatu wyszukiwania (SEO) to proces podniesienia rangi witryny internetowej na liście wyników wyszukiwarki. Im wyższa ranga witryny i tym bardziej spójnie jest wyświetlana, tym więcej odwiedzających witryna otrzyma od tej wyszukiwarki. Web Essentials zawiera narzędzie analityczne, które analizuje kod HTML, zgłasza znalezione problemy i zapewnia pomoc w ich rozwiązaniu.

1. Przejdź do menu Widok i kliknij pozycję Lista błędów , aby otworzyć okno Lista błędów .

   

   Lista błędów w menu Widok

2. Zwróć uwagę, że istnieje ostrzeżenie SEO z powiadomieniem, że <brakuje tagu meta> opisu strony. Kliknij dwukrotnie wpis ostrzegawczy SEO, aby go naprawić.

   

   Okno Lista błędów

3. W oknie dialogowym Web Essentials kliknij przycisk Tak, aby wstawić opisowy tag< meta>.

   

   Okno dialogowe Web Essentials

4. Zostanie otwarty edytor pliku _Layout.cshtml , a <tag meta> zostanie automatycznie dodany do sekcji nagłówka pliku HTML.

   

   Tag meta jest automatycznie dodawany do strony _Layout

5. Zmień wartość atrybutu zawartości na GeekQuiz i zapisz plik.

Ćwiczenie 2. Korzystanie z fragmentów kodu i funkcji IntelliSense

W programie Web Essentials edytor HTML został rozszerzony o dodatkowe funkcje. W tym ćwiczeniu zobaczysz kilka nowych funkcji, które są przydatne podczas tworzenia aplikacji internetowych.

Zadanie 1 — używanie funkcji IntelliSense w dokumentach HTML

Pierwsza nowa funkcja, którą zobaczysz w tym zadaniu, nosi nazwę Dynamic IntelliSense. Funkcja IntelliSense dynamiczna odczytuje inne tagi i atrybuty, aby wywnioskować możliwe identyfikatory, których będziesz używać.

W tym zadaniu utworzysz nowy element formularza HTML zawierający etykietę i pole wejściowe. Następnie dodasz atrybut for do etykiety, aby powiązać ją z polem wejściowym i zobaczysz sugestie funkcji IntelliSense na podstawie identyfikatorów pól wejściowych w kontekście.

1. Otwórz program Visual Studio Express 2013 for Web i rozwiązanie Begin.sln znajdujące się w folderze Source/Ex2-TakingAdvantageofCodeSnippetsandIntelliSense/Begin . Alternatywnie możesz kontynuować pracę z rozwiązaniem uzyskanym w poprzednim ćwiczeniu.

2. W Eksploratorze rozwiązań otwórz plik Index.cshtml znajdujący się w folderze Widoki | główne .

3. Dodaj następujący formularz wewnątrz <elementu sekcji> .

   (Fragment kodu — VisualStudio2013WebTooling - Ex2 - Formularz)

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

4. Tag wejściowy powinien być poprzedzony etykietą z opisem pola. Dodaj następującą etykietę przed tagiem wejściowym.

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

5. Atrybut for elementu <label> określa, z którym elementem formularza jest ten label powiązany. Wartość atrybutu powinna być równa identyfikatorowi powiązanego elementu. Dodaj atrybut for do <elementu etykiety>. Jak pokazano na poniższym rysunku, wartość "name" pojawia się w polu IntelliSense na podstawie identyfikatora elementów w tym samym zakresie (formularz< otaczający>).

   

   Wyświetlanie identyfikatora w IntelliSense

6. Usuń ostatnio dodany <element formularza> i jego zawartość.

Zadanie 2 — Używanie fragmentów kodu HTML

Język HTML5 wprowadził ponad 25 nowych tagów semantycznych. Program Visual Studio ma już obsługę funkcji IntelliSense dla tych tagów, ale program Visual Studio 2013 przyspiesza i ułatwia pisanie znaczników przez dodanie nowych fragmentów kodu. Chociaż te tagi nie są skomplikowane, wiążą się z kilkoma małymi subtelnościami, takimi jak dodanie odpowiednich kodeków zapasowych dla tagu audio. W tym zadaniu zobaczysz fragmenty kodu HTML dla tagu audio.

1. W pliku Index.cshtml wpisz <aud wewnątrz <elementu sekcji> , jak pokazano na poniższej ilustracji.

   

   Wstawianie elementu audio

2. Naciśnij dwukrotnie klawisz TAB i zwróć uwagę, jak na stronie jest dodawany następujący kod, a kursor znajduje się na atrybucie src pierwszego źródła.

   <audio controls="controls">
        <source src="file.mp3" type="audio/mp3" />
        <source src="file.ogg" type="audio/ogg" />
   </audio>
   

   Uwaga / Notatka

   Dwukrotne naciśnięcie klawisza TAB powoduje wstawienie fragmentu kodu. Fragment kodu audio przedstawia standardowe użycie tagu audio z dwoma plikami źródłowymi w celu zwiększenia obsługi.

3. Usuń drugi wiersz i zaktualizuj źródło pierwszego wiersza na poniższy link do programu Installing ASP.NET and Web Tools: /shows/asp-net-site-videos/installing-aspnet-web-tools. Wynikowy kod jest pokazany poniżej.

   <audio controls="controls">
        <source src="http://media.ch9.ms/ch9/11d8/604b8163-fad3-4f12-9607-b404201211d8/KatanaProject.mp3" type="audio/mp3" />
   </audio>
   

   Uwaga / Notatka

   Plik źródłowy jest używany jako przykład. Jeśli wolisz, możesz użyć innego źródła.

4. Naciśnij klawisze CTRL + S , aby zapisać plik.

5. Naciśnij klawisze CTRL + F5 , aby uruchomić aplikację.

6. Zwróć uwagę, że odtwarzacz audio został dodany do aplikacji.

   

   Odtwarzacz audio w programie Internet Explorer

   

   Odtwarzacz audio w przeglądarce Google Chrome

7. Nie zamykaj przeglądarek. Będą one używane w następnym zadaniu.

Zadanie 3 — używanie funkcji IntelliSense w dokumentach Języka JavaScript

W programie Web Essentials 2013 arkusze stylów i strony HTML tworzą listę identyfikatorów i nazw klas. W tym zadaniu dowiesz się, jak te listy zwiększają obsługę funkcji IntelliSense języka JavaScript w programie Web Essentials 2013.

1. W pliku Index.cshtml dodaj następujący kod, aby zdefiniować tag skryptu dla kodu JavaScript.

   ...
   </section>
   @section scripts{
       <script type="text/javascript">
   
       </script>
   }
   

2. Dodaj następujący kod wewnątrz tagu skryptu , aby zdefiniować gotową funkcję wywołania zwrotnego.

   (Fragment kodu — VisualStudio2013WebTooling - Ex2 - ReadyFunction)

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

3. Umieść kursor w tagu skryptu i naciśnij CTRL + . aby otworzyć menu sugestii.

4. Kliknij pozycję Wyodrębnij do pliku.

   

   Propozycja wyodrębnienia JavaScript do pliku

5. W oknie Zapisz jako wybierz folder Skrypty , nadaj plikowi nazwęinit.js i kliknij przycisk Zapisz.

   

   Okno Zapisz jako

   Uwaga / Notatka

   Zostanie utworzony plik init.js , a zawartość skryptu zostanie przeniesiona do pliku.

   

   Init.js plik utworzony za pomocą dołączonej zawartości

6. Otwórz plik Index.cshtml i sprawdź, czy tag skryptu został zastąpiony odwołaniem do pliku init.js .

   

   Init.js referencja html

7. Przejdź do Eksploratora rozwiązań i zwróć uwagę, że plik init.js został automatycznie uwzględniony w rozwiązaniu.

   

   plikInit.js dołączony do rozwiązania

8. Wróć do pliku init.js , aby zaktualizować gotowe wywołanie zwrotne funkcji.

9. Wewnątrz definicji funkcji callback, która jest przekazywana do ready, dodaj następujący kod, aby pobrać wszystkie elementy na podstawie określonego atrybutu klasy.

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

10. Naciśnij CTRL + Spacja pomiędzy cudzysłowami wewnątrz wywołania funkcji getElementsByClassName.

    

    Wyświetlanie funkcji IntelliSense dla funkcji getElementsByClassName

    Uwaga / Notatka

    Zwróć uwagę, że funkcja IntelliSense pokazuje klasy zdefiniowane w arkuszach stylów projektu.

11. Zastąp utworzony wiersz następującym kodem.

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

12. Umieść kursor po au wewnątrz cudzysłowów w funkcji getElementsByTagName i naciśnij CTRL + i Spacja.

    

    Wyświetlanie funkcji IntelliSense dla metody getElementsByTagName

13. Wybierz pozycję "audio" z listy i naciśnij klawisz ENTER. Wynik przedstawiono na poniższej ilustracji.

    

    Pobieranie elementów dźwięku

14. W Eksplorator rozwiązań (Eksploratorze rozwiązań) kliknij prawym przyciskiem myszy plik init.js w folderze Scripts, a następnie wybierz pozycję Minify JavaScript file(s) z menu Web Essentials.

    

    Minifiguruj pliki JavaScript

15. Po wyświetleniu monitu o włączenie automatycznej minification po zmianie pliku źródłowego kliknij przycisk Tak.

    

    Włączanie ostrzeżenia o automatycznej minyfikacji

    Uwaga / Notatka

    init.min.jsjest tworzony i dodawany jako zależność pliku init.js.

    

    utworzony plikInit.min.js

16. Otwórz plik init.min.js i zwróć uwagę, że plik jest minyfikowany.

    

    zawartość plikuInit.min.js

17. W pliku init.js dodaj następujący kod poniżej wywołania funkcji getElementsByTagName , aby odtworzyć wszystkie elementy audio.

    (Fragment kodu — VisualStudio2013WebTooling - Ex2 - PlayAudioElements)

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

18. Kliknij klawisze CTRL + S , aby zapisać plik. Ponieważ zminimalizowany plik został już otwarty, zostanie wyświetlone okno dialogowe z informacją, że plik został zmodyfikowany poza edytorem źródłowym. Kliknij przycisk Tak.

    

    Ostrzeżenie programu Microsoft Visual Studio

19. Wróć do pliku init.min.js , aby sprawdzić, czy plik został zaktualizowany przy użyciu nowego kodu.

    

    zaktualizowano plikInit.min.js

20. Kliknij przycisk Odśwież łącze przeglądarki .

21. Po odświeżeniu obu przeglądarek odtwarzacze audio, które były wyświetlane w poprzednim zadaniu, zostaną uruchomione automatycznie.

    

    Odtwarzacz audio dołączony do widoku

Podsumowanie

Kończąc to praktyczne laboratorium, nauczyłeś się, jak:

• Używanie nowych funkcji edytora HTML zawartych w składniku Web Essentials, takich jak zaawansowane fragmenty kodu HTML5 i kodowanie Zen
• Używanie nowych funkcji edytora CSS zawartych w składnikach Web Essentials, takich jak selektor kolorów i etykietka narzędzia macierzy przeglądarki
• Używaj nowych funkcji edytora JavaScript dostępnych w Web Essentials, takich jak Eksport do pliku i IntelliSense dla wszystkich elementów HTML.
• Wymiana danych między przeglądarką a programem Visual Studio przy użyciu linku przeglądarki