Uygulamalı Laboratuvar: Visual Studio 2013 Web Araçları

Web Camps Ekibi tarafından

Web Camps Eğitim Setini indirin

Visual Studio, için mükemmel bir geliştirme ortamıdır. NET tabanlı Windows ve web projeleri. Tek başına dosyaları proje olmadan düzenlemek için kolayca kullanılabilen güçlü bir metin düzenleyicisi içerir.

Siz her dosyayı düzenlerken Visual Studio tam özellikli ayrıştırma ağacı tutar. Bu, Visual Studio'ya benzersiz otomatik tamamlama ve belge tabanlı eylemler sağlarken geliştirme deneyimini çok daha hızlı ve daha keyifli hale getirir. Bu özellikler özellikle HTML ve CSS belgelerinde güçlü bir özelliktir.

Tüm bu güç uzantılar için de kullanılabilir, böylece düzenleyicileri gereksinimlerinize uyacak şekilde güçlü yeni özelliklerle genişletmeyi basit hale getirir. Web Essentials, Visual Studio'da web ile ilgili iyileştirmelerden oluşan bir koleksiyondur. Birçok yeni IntelliSense tamamlaması (özellikle CSS için), yeni Tarayıcı Bağlantısı özellikleri, JavaScript dosyaları için otomatik JSHint, HTML ve CSS için yeni uyarılar ve modern web geliştirme için gerekli olan diğer birçok özelliği içerir.

Tüm örnek kod ve kod parçacıkları adresinde bulunan Web Camps Eğitim Seti'ne https://aka.ms/webcamps-training-kitdahildir.

Genel Bakış

Hedefler

Bu uygulamalı laboratuvarda şunların nasıl yapılacağını öğreneceksiniz:

• Zengin HTML5 kod parçacıkları ve Zen kodlama gibi Web Essentials'ta bulunan yeni HTML düzenleyicisi özelliklerini kullanma
• Renk seçici ve Tarayıcı matrisi araç ipucu gibi Web Temel Parçalar'da bulunan yeni CSS düzenleyicisi özelliklerini kullanma
• Tüm HTML öğeleri için Dosyaya Ayıkla ve IntelliSense gibi Web Temel Parçalar'da bulunan yeni JavaScript düzenleyicisi özelliklerini kullanın
• Tarayıcı Bağlantısını kullanarak tarayıcınızla Visual Studio arasında veri alışverişi yapın

Önkoşullar

Bu uygulamalı laboratuvarı tamamlamak için aşağıdakiler gereklidir:

• Microsoft Visual Studio Professional 2013 veya üzeri
• Web Essentials 2013
• Google Chrome

Kurulum

Alıştırmaları bu uygulamalı laboratuvarda çalıştırmak için önce ortamınızı ayarlamanız gerekir.

1. Bir Windows Gezgini penceresi açın ve laboratuvarın Kaynak klasörüne göz atın.
2. Setup.cmd'ye sağ tıklayıp Yönetici olarak çalıştır'ı seçerek ortamınızı yapılandıracak kurulum işlemini başlatın ve bu laboratuvar için Visual Studio kod parçacıklarını yükleyin.
3. Kullanıcı Hesabı Denetimi iletişim kutusu gösteriliyorsa, devam etmek için eylemi onaylayın.

Kod Parçacıklarını Kullanma

Laboratuvar belgesinin tamamında kod blokları eklemeniz istenir. Size kolaylık olması için, bu kodun çoğu el ile eklemek zorunda kalmamak için Visual Studio 2013 içinden erişebileceğiniz Visual Studio Code Kod Parçacıkları olarak sağlanır.

Egzersiz

Bu uygulamalı laboratuvar aşağıdaki alıştırmaları içerir:

1. Tarayıcı Bağlantısı ve Web Temel Bileşenleri ile Çalışma
2. Kod Parçacıklarından ve IntelliSense'in Avantajlarından Yararlanma

Alıştırma 1: Tarayıcı Bağlantısı ve Web Temel Bileşenleri ile Çalışma

Web Essentials , çoğunlukla web geliştirme deneyimini çok daha hızlı ve daha keyifli hale getirmeye odaklanan modern web geliştirme için çeşitli yararlı özellikler ekleyen bir Visual Studio uzantısıdır. Visual Studio'daki Uzantı Galerisi'nden Web Essentials'ı yükleyebilirsiniz.

Tarayıcı Bağlantısı, web uygulamanızla Visual Studio arasında veri alışverişi yapmak için Visual Studio IDE ile herhangi bir açık tarayıcı arasında bir kanal sağlayan Visual Studio 2013 eklenen yeni bir özelliktir. Web Essentials, DoM nesne modelini ve web sayfalarınızın CSS stillerini doğrudan tarayıcıdan işlemek için Tarayıcı Bağlantısı'nı araçlarla genişletir.

Bu alıştırmada, basit bir test sayfasını geliştirmek için Web Essentials ve Tarayıcı Bağlantısı tarafından desteklenen bazı özellikleri keşfedeceksiniz.

Görev 1 - Projeyi Birden Çok Tarayıcıda Çalıştırma

Bu görevde, web uygulamanızı aynı anda birden çok tarayıcıda çalışacak şekilde yapılandıracaksınız. Bu, tarayıcılar arası test için kullanışlıdır.

1. Microsoft Visual Studio’yu açın.

2. Dosya menüsünde Aç | öğesini seçin Proje/Çözüm... ve laboratuvarın Kaynak klasöründe Ex1-WorkingwithBrowserLinkandWebEssentials\Begin konumuna gidin (C:\WebCampsTK\HOL\VSWebTooling\Source). Begin.sln öğesini seçin ve Aç'a tıklayın.

3. Visual Studio araç çubuğunda tarayıcı menüsünü genişletin ve Birlikte Gözat... seçeneğini belirleyin.

   

   Gözat menü seçeneği

4. Birlikte Gözat iletişim kutusunda, CTRL tuşunu basılı tutarak hem Google Chrome'u hem de Internet Explorer'ı seçin ve Varsayılan Olarak Ayarla'ya tıklayın.

   

   Birden çok varsayılan tarayıcı seçme

5. Hem Google Chrome hem de Internet Explorer artık varsayılan tarayıcılar olarak görünmelidir. İletişim kutusunu kapatmak için İptal'e tıklayın.

   

   Varsayılan tarayıcılar olarak Google Chrome ve Internet Explorer

   Not

   Varsayılan tarayıcıları yapılandırdıktan sonra, tarayıcı menüsünde Birden Çok Tarayıcı seçeneği belirlenir.

   

6. Uygulamayı hata ayıklamadan çalıştırmak için CTRL + F5 tuşuna basın.

7. Her iki tarayıcı penceresi de açıldığında, her iki tarayıcıdaki güncelleştirmeleri aynı anda görmek için bunlardan birini diğerinin üzerine yerleştirin. Tarayıcılarda açık mavi dikdörtgen içeren bir web sayfası görüntülenmelidir.

   

   Bir tarayıcıyı diğerinin üstüne yerleştirme

8. Tarayıcıları kapatmayın. Bunları bir sonraki görevde kullanacaksınız.

Görev 2 - HTML Öğeleri Oluşturmak için Zen Kodlama kullanma

Zen Coding yüksek hızlı HTML, XML, XSL (veya başka bir yapılandırılmış kod biçimi) kodlama ve düzenleme için bir düzenleyici eklentisidir. Bu eklentinin temeli, CSS seçicilerine benzer ifadeleri HTML koduna genişletmenizi sağlayan güçlü bir kısaltma altyapısıdır. Zen Coding, CSS stili seçici söz dizimi kullanarak HTML yazmanın hızlı bir yoludur.

Bu alıştırmada, sorunun seçeneklerini temsil eden HTML düğmelerini oluşturmak için Web Essentials tarafından sağlanan Zen Kodlama özelliğini kullanacaksınız.

1. Visual Studio’ya geri dönün.

2. Görünümler | Giriş klasöründe bulunan Index.cshtml dosyasını açın.

3. <!-- TODO değerini değiştirin: seçenekleri buraya ekleyin;> açıklamayı aşağıdaki kodla değiştirin ve SEKME tuşuna basın.

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

4. Kod HTML olarak genişletilmelidir.

   

   Genişletilmiş HTML

   Not

   Zen Kodlama söz dizimi hakkında daha fazla bilgi edinmek için aşağıdaki makaleye bakın.

5. Her iki tarayıcıyı da güncelleştirmek için Bağlı tarayıcıları yenile düğmesine tıklayın.

   

   Bağlı tarayıcıları yenileme

   

   Internet Explorer - Sayfa dört düğmeyle güncelleştirildi

   

   Google Chrome - Sayfa dört düğmeyle güncelleştirildi

6. Visual Studio’ya geri dönün.

7. Düğmeleri sayfaya eklediniz, ancak yine de şablon sorusu eklemeniz gerekiyor. Bunu yapmak için Web Essentials'ta Lorem Ipsum oluşturucu adlı yeni bir özellik kullanacaksınız. sınıf özniteliği ön ile div öğesini bulun.

8. Aşağıdaki kodu div'in ilk alt öğesi olarak ekleyin ve SEKME tuşuna basın.

   p.lead>lorem5
   

9. Kod HTML olarak genişletilmelidir.

   

   Lorem Ipsum otomatik olarak oluşturulmuş

   Not

   Zen Kodlama'nın bir parçası olarak artık Lorem Ipsum kodunu doğrudan HTML düzenleyicisinde oluşturabilirsiniz. Lorem yazıp SEKME tuşuna basmanız yeterlidir; 30 sözcük lorem Ipsum metni eklenir. Örneğin lorem10 , 10 Lorem Ipsum sözcüğü ekler.

10. Web Essentials'ta Lorem Pixel generator adlı başka bir yeni özelliği kullanarak sorunun en üstüne bir logo ekleyebilirsiniz. Sınıf değeri olarakkapsayıcı içeren div öğesinin ilk alt öğesi olarak aşağıdaki kodu ekleyin ve SEKME tuşuna basın.

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

11. Kod HTML olarak genişletilmelidir.

    

    Lorem Pixel otomatik olarak oluşturulmuş

    Not

    Zen Kodlama'nın bir parçası olarak Lorem Pixel kodunu doğrudan HTML düzenleyicisinde de oluşturabilirsiniz. Sadece pix-200x200-animals yazın ve SEKME tuşuna basıp bir hayvanın 200x200 görüntüsünü içeren bir img etiketi eklenecektir.

12. Her iki tarayıcıyı da güncelleştirmek için Bağlı tarayıcıları yenile düğmesine tıklayın.

    

    Internet Explorer - Otomatik olarak oluşturulan görüntü ve metin

    

    Google Chrome - Otomatik oluşturulan görüntü ve metin

    Not

    Kod parçacığı eklenirken görüntü rastgele seçildiğinden, tarayıcılarda gösterilen görüntü farklı olabilir.

13. Tarayıcıları kapatmayın. Bunları bir sonraki görevde kullanacaksınız.

Görev 3 - Stil Özelliğini Güncelleştirme

Bu görevde, Tarayıcı Bağlantısının İnceleme Modu özelliğini kullanarak belirli DOM öğesinin oluşturulduğu konumu tam olarak algılayacak ve ardından Web Essentials tarafından sağlanan bir renk seçici kullanarak bu öğenin renk özelliğini güncelleştireceksiniz.

1. Internet Explorer tarayıcısında, İnceleme Modu'nu etkinleştirmek için CTRL + ALT + I tuşlarına basın.

2. İşaretçiyi açık mavi kenarlık üzerinde hareket ettirin ve tıklayın.

   

   İşaretçiyi açık mavi kenarlık üzerinde hareket ettirme

3. Visual Studio’ya geri dönün. Tarayıcıda seçtiğiniz HTML öğesinin Visual Studio HTML düzenleyicisinde de nasıl seçildiğine dikkat edin.

   

   Visual Studio HTML düzenleyicisinde seçilen HTML öğesi

4. Şimdi seçili öğenin stillerini değiştirmek için ön CSS sınıfını güncelleştirebilirsiniz. Bunu yapmak için CTRL + tuşuna basarakGit arama kutusunu açın. site.css yazın ve enter tuşuna basarak dosyayı açın.

   

   Site.css dosyasını açma

5. CSS seçicisini bulmak için CTRL + F tuşuna basın ve .flip-container .front yazın.

6. Renk Seçici'yi açmak için sınıfın kenarlık özelliğindeki açık mavi kareye tıklayın.

   

   Renk Seçiciyi Açma

7. Köşeli çift ayraç düğmesine tıklayarak Renk Seçici'yi genişletin ve yeni bir renk seçin.

   

   Renk Seçiciyi Genişletme

8. Bağlantılı tarayıcıları yenilemek için CTRL + ALT + ENTER tuşuna basın.

9. Internet Explorer'a geçin ve kenarlığı renginin nasıl değiştiğine dikkat edin.

   

   Internet Explorer - Kenarlık rengi güncelleştirildi

10. Google Chrome'a geçin ve kenarlığı renginin nasıl değiştiğine dikkat edin.

    

    Google Chrome - Kenarlık rengi güncelleştirildi

11. Visual Studio’ya geri dönün.

12. Site.css dosyasının sonuna gidin ve .btn seçicisini bulmak için CTRL + F tuşuna basın.

13. -webkit-border-radius özelliğinin yeşille altı çizili olduğuna dikkat edin.

    

    btn seçicisinin -webkit-border-radius özelliği

14. Şapka işaretini -webkit-border-radius özelliğine yerleştirin. Özelliğin ilk sözcüğünün ilk harfinin altında mavi bir çizgi görünmelidir. Bu akıllı etikettir.

15. Öneriler menüsünü açmak için CTRL + tuşuna basın ve Eksik standart özellik ekle (kenarlık yarıçapı) seçeneğine tıklayın.

    

    Eksik standart özellik önerisi ekleme

16. Border-radius özelliği CSS kuralına otomatik olarak eklenir.

    

    Eksik standart özellik eklendi

17. Tarayıcı matrisi araç ipucunun görüntülenmesi için işaretçiyi kenarlık yarıçapı özelliğinin üzerine getirin. Tarayıcı matrisi araç ipucu, özelliğin her tarayıcıda kullanılabilirliğini gösterir.

    

    Tarayıcı matrisi araç ipucu

18. Border-radius özelliğinin değerinin hala altı çizili olduğuna dikkat edin. Uyarı iletisini görmek için işaretçiyi değerin üzerine getirin.

    

    Kenarlık yarıçapı özellik değeri uyarısı

19. Araç ipucu tarafından önerilen kenarlık yarıçapı özellik değerinin birimini kaldırın.

20. Kenarlık yarıçapı, yuvarlatılmış kenarlık köşelerinin nasıl olduğunu tanımlamaya yönelik standart özellik olduğundan, CSS kuralından -webkit-border-radius özelliğini ve değerini kaldırabilirsiniz.

21. Şapka işaretini sözcük kaydırma özelliğine yerleştirin ve akıllı etiketin de aşağıda gösterildiğine dikkat edin.

22. Menüyü açın ve Eksik satıcı ayrıntıları ekle'ye tıklayın.

    

    Eksik satıcı ayrıntıları önerisi ekleme

23. -ms-word-wrap özelliği CSS kuralına otomatik olarak eklenir.

    

    Satıcıya özgü özellik eklendi

Görev 4 - HTML Kodunu Tarayıcıdan Güncelleştirme

Bu görevde Tarayıcı Bağlantısı'nın Tasarım Modu özelliğini kullanarak DOM nesnesini tarayıcıdan düzenleyecek ve değişiklikleri Visual Studio'daki HTML kaynak dosyasına aktaracaksınız.

1. Google Chrome'da Tasarım Modu'nu etkinleştirmek için CTRL + ALT + D tuşlarına basın.

2. İşaretçiyi Lorem Ipsum dolor sit amet etiketinin üzerine getirin ve tıklayın.

   

   Soruyu düzenleme

3. İmleç görünmelidir. Özgün metni Daha uzun bir soru yazdığımda nasıl görünüyor? ile değiştirin ve tasarım modundan çıkmak için ESC tuşuna basın.

   

   Soru düzenlendi

4. Visual Studio'ya dönün ve henüz açılmadıysa Index.cshtml dosyasını açın. p öğesinin iç metninin <güncelleştirilmiş olduğuna dikkat edin.>

   

   HTML sayfasındaki güncelleştirilmiş soru

Görev 5 - SEO ile İlgili Uyarıları gözden geçirme

Arama Motoru İyileştirme (SEO), bir web sitesinin arama motorunun sonuç listesinde daha üst sırada yer alma sürecidir. Site ne kadar yüksek sıralanır ve ne kadar tutarlı bir şekilde listelenirse, site o arama motorundan o kadar fazla ziyaretçi alır. Web Essentials, HTML'yi inceleyen, bulunan sorunları bildiren ve bunları düzeltmek için yardım sağlayan bir analiz aracı içerir.

1. Görünüm menüsüne gidin ve Hata Listesi'ne tıklayarak Hata Listesi penceresini açın.

   

   Görünüm menüsünde hata listesi

2. Sayfa açıklaması için meta etiketin eksik olduğunu bildiren bir <> SEO uyarısı olduğuna dikkat edin. Düzeltmek için SEO uyarı girdisine çift tıklayın.

   

   Hata Listesi penceresi

3. Web Temel Parçalar iletişim kutusunda Evet'e tıklayarak açıklama <meta> etiketi ekleyin.

   

   Web Temel Parçalar iletişim kutusu

4. _Layout.cshtml düzenleyicisi açılır ve <meta> etiketi otomatik olarak HTML dosyasının head bölümüne eklenir.

   

   Meta etiketi otomatik olarak _Layout sayfasına eklenir

5. İçerik özniteliğinin değerini GeekQuiz olarak değiştirin ve dosyayı kaydedin.

Alıştırma 2: Kod Parçacıklarından ve IntelliSense'in Avantajlarından Yararlanma

Web Essentials ile HTML düzenleyicisi ek işlevlerle genişletilmiştir. Bu alıştırmada, web uygulamaları geliştirirken yararlı olan bazı yeni özellikler göreceksiniz.

Görev 1 - HTML Belgelerinde IntelliSense Kullanma

Bu görevde göreceğiniz ilk yeni özellik Dinamik IntelliSense olarak adlandırılır. Dinamik IntelliSense, kullanacağınız olası kimlikleri çıkarsamak için diğer etiketleri ve öznitelikleri okur.

Bu görevde, etiket ve giriş alanı içeren yeni bir HTML form öğesi oluşturacaksınız. Ardından etikete girişe bağlamak için bir for özniteliği eklersiniz ve kapsamdaki girişlerin kimliklerine göre IntelliSense önerileri görürsünüz.

1. Source/Ex2-TakingAdvantageofCodeSnippetsandIntelliSense/Begin klasöründe bulunan Web için Visual Studio Express 2013 ve Begin.sln çözümünü açın. Alternatif olarak, önceki alıştırmada elde ettiğiniz çözümle devam edebilirsiniz.

2. Çözüm Gezgini'da, Görünümler | Giriş klasöründe bulunan Index.cshtml dosyasını açın.

3. Bölüm> öğesinin içine< aşağıdaki formu ekleyin.

   (Kod Parçacığı - VisualStudio2013WebTooling - Ex2 - Form)

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

4. Giriş etiketinden önce alanın açıklamasını içeren bir etiket bulunmalıdır. Giriş etiketinden önce aşağıdaki etiketi ekleyin.

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

5. Etiketin for özniteliği, bir< etiketin> hangi form öğesine bağlı olduğunu belirtir. Özniteliğin değeri, ilgili öğenin kimliğine eşit olmalıdır. etiket> öğesine for özniteliğini< ekleyin. Aşağıdaki şekilde gösterildiği gibi, IntelliSense kutusunda aynı kapsamdaki öğelerin kimliğine (kapsayan <form>) göre "name" değeri açılır.

   

   IntelliSense'te kimliği gösterme

6. Son eklenen <form> öğesini ve içeriğini silin.

Görev 2 - HTML Kod Parçacıklarını Kullanma

HTML5, 25'ten fazla yeni anlam etiketi kullanıma sunulmuştur. Visual Studio'da bu etiketler için IntelliSense desteği zaten vardı, ancak Visual Studio 2013 yeni kod parçacıkları ekleyerek işaretleme yazmanın daha hızlı ve kolay olmasını sağlar. Bu etiketler karmaşık olmasa da, ses etiketi için doğru codec geri dönüşlerini ekleme gibi birkaç küçük incelik içerir. Bu görevde, ses etiketi için HTML kod parçacıklarını göreceksiniz.

1. Index.cshtml dosyasında, aşağıdaki şekilde gösterildiği gibi bölüm> öğesinin< içine aud yazın<.

   

   Ses öğesi ekleme

2. SEKME tuşuna iki kez basın ve aşağıdaki kodun sayfaya eklendiğine ve imlecin ilk kaynağın src özniteliğine yerleştirildiğine dikkat edin.

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

   Not

   SEKME tuşuna iki kez basıldığında kod parçacığı eklenir. Ses parçacığı, geliştirilmiş destek için iki kaynak dosyasıyla birlikte ses etiketinin standart kullanımını gösterir.

3. İkinci satırı silin ve yükleme ASP.NET and Web Tools şu bağlantıyla ilk satırın kaynağını güncelleştirin: https://video2.skills-academy.com/shows/asp-net-site-videos/installing-aspnet-web-tools. Elde edilen kod aşağıda gösterilmiştir.

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

   Not

   Örnek olarak kaynak dosya kullanılır. İsterseniz başka bir kaynak kullanabilirsiniz.

4. Dosyayı kaydetmek için CTRL + S tuşuna basın.

5. Uygulamayı başlatmak için CTRL + F5 tuşlarına basın.

6. Uygulamaya bir ses çalar eklendiğine dikkat edin.

   

   Internet Explorer'da ses yürütücü

   

   Google Chrome'da ses oynatıcı

7. Tarayıcıları kapatmayın. Bunları bir sonraki görevde kullanacaksınız.

Görev 3 - JavaScript Belgelerinde IntelliSense Kullanma

Web Essentials 2013 ile, stil sayfaları ve HTML sayfaları kimliklerin ve sınıf adlarının listesini oluşturur. Bu görevde, bu listelerin Web Essentials 2013'te JavaScript IntelliSense desteğini nasıl geliştirdiğini öğreneceksiniz.

1. Index.cshtml dosyasına aşağıdaki kodu ekleyerek JavaScript kodu için bir betik etiketi tanımlayın.

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

2. Hazır geri çağırma işlevini tanımlamak için betik etiketine aşağıdaki kodu ekleyin.

   (Kod Parçacığı - VisualStudio2013WebTooling - Ex2 - ReadyFunction)

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

3. Şapka işaretini betik etiketine yerleştirin ve öneri menüsünü açmak içinCTRL + tuşuna basın.

4. Dosyaya Ayıkla'ya tıklayın.

   

   Dosyaya JavaScript ayıklama önerisi

5. Farklı Kaydet penceresinde Betikler klasörünü seçin, dosyayı init.js adlandırın ve Kaydet'e tıklayın.

   

   Farklı Kaydet penceresi

   Not

   init.js dosyası oluşturulur ve betiğin içeriği dosyaya taşınır.

   

   dahil edilen içerikle oluşturulanInit.js dosyası

6. Index.cshtml dosyasını açın ve betik etiketinin init.js dosyasına bir başvuruyla değiştirilip değiştirilmediğini denetleyin.

   

   html başvurusuInit.js

7. Çözüm Gezgini gidin ve init.js dosyasının çözüme otomatik olarak eklendiğine dikkat edin.

   

   Çözüme eklenenInit.js dosyası

8. Hazır işlev geri çağırmasını güncelleştirmek için init.js dosyasına geri dönün.

9. Hazır olarak geçirilen işlev geri çağırma tanımının içine, tüm öğeleri belirli bir sınıf özniteliğine göre almak için aşağıdaki kodu ekleyin.

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

10. getElementsByClassName işlev çağrısının içindeki tırnak işaretleri arasında CTRL + Ara Çubuğu'na basın.

    

    getElementsByClassName işlevi için IntelliSense gösteriliyor

    Not

    IntelliSense'in proje stili sayfalarında tanımlanan sınıfları gösterdiğine dikkat edin.

11. Oluşturduğunuz satırı aşağıdaki kodla değiştirin.

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

12. getElementsByTagName işlevindeki tırnak işaretleri içinde imleci au'dan sonra getirin ve CTRLAra Çubuğu'na + basın.

    

    getElementsByTagName yöntemi için IntelliSense gösteriliyor

13. Listeden "ses" öğesini seçin ve ENTER tuşuna basın. Sonuç aşağıdaki şekilde gösterilmiştir.

    

    Ses Öğelerini Alma

14. Çözüm Gezgini'daBetikler klasöründekiinit.js dosyasına sağ tıklayın ve Web Essentialsmenüsünden JavaScript dosyalarını küçültün'i seçin.

    

    JavaScript dosyaları küçültme

15. Kaynak dosya değiştiğinde otomatik küçültmeyi etkinleştirmeniz istendiğinde Evet'e tıklayın.

    

    Otomatik küçültme uyarısını etkinleştirme

    Not

    init.min.js oluşturulur ve init.js dosyasının bağımlılığı olarak eklenir.

    

    Init.min.js dosyası oluşturuldu

16. init.min.js dosyasını açın ve dosyanın küçültüldüğünü fark edin.

    

    Dosya içeriğiniInit.min.js

17. init.js dosyasında, tüm ses öğelerini yürütmek için getElementsByTagName işlev çağrısının altına aşağıdaki kodu ekleyin.

    (Kod Parçacığı - VisualStudio2013WebTooling - Ex2 - PlayAudioElements)

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

18. Dosyayı kaydetmek için CTRL + S'ye tıklayın. Küçültülmüş dosya zaten açık olduğundan, dosyanın kaynak düzenleyici dışında değiştirildiğini belirten bir iletişim kutusu görürsünüz. Evet'e tıklayın.

    

    Microsoft Visual Studio uyarısı

19. Dosyanın yeni kodla güncelleştirildiğini doğrulamak için init.min.js dosyasına geri dönün.

    

    Init.min.js dosyası güncelleştirildi

20. Tarayıcı Bağlantısı Yenileme düğmesine tıklayın.

21. Her iki tarayıcı da yenilendiğinde, önceki görevde gördüğünüz ses yürütücüleri otomatik olarak yürütülmeye başlar.

    

    Görünüme dahil edilen ses yürütücü

Özet

Bu uygulamalı laboratuvarı tamamlayarak aşağıdakilerin nasıl yapılacağını öğrendiniz:

• Zengin HTML5 kod parçacıkları ve Zen kodlama gibi Web Essentials'ta bulunan yeni HTML düzenleyicisi özelliklerini kullanma
• Renk seçici ve Tarayıcı matrisi araç ipucu gibi Web Temel Parçalar'da bulunan yeni CSS düzenleyicisi özelliklerini kullanma
• Tüm HTML öğeleri için Dosyaya Ayıkla ve IntelliSense gibi Web Temel Parçalar'da bulunan yeni JavaScript düzenleyicisi özelliklerini kullanın
• Tarayıcı Bağlantısını kullanarak tarayıcınızla Visual Studio arasında veri alışverişi yapın